/* ============================================================
   KinHub - Screen styles
   ============================================================ */

/* ---------- LOGIN ---------- */
.lg-wrap{
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(47,189,126,.05), transparent 70%),
    var(--bg);
}
.lg-card{
  width: min(960px, 100%);
  display: grid;
  grid-template-columns: 340px 1fr;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
}
.lg-aside{
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  background: var(--surface-2);
  border-right: 1px solid var(--line);
}
.lg-aside-name{ font-size: 22px; font-weight: 680; margin-top: 18px; letter-spacing:0; }
.lg-aside-tag{ color: var(--text-2); font-size: 14px; margin-top: 4px; }
.lg-aside-greet{ font-size: 17px; font-weight: 600; }
.lg-aside-hint{ color: var(--text-2); font-size: 14px; line-height: 1.5; margin: 10px 0 22px; }
.lg-status{ display:flex; align-items:center; gap:9px; font-size: 13px; color: var(--text-2); }
.lg-status-dot{ width:8px; height:8px; border-radius:999px; background: var(--accent); box-shadow:0 0 0 4px var(--accent-weak); }
.lg-error{
  margin: -8px 0 16px;
  padding: 12px 14px;
  border-radius: var(--r-btn);
  border: 1px solid rgba(224,91,91,.4);
  background: rgba(224,91,91,.10);
  color: #e08a8a;
  font-size: 14px;
  font-weight: 600;
}

.lg-pad{ padding: 36px 40px 40px; }
.lg-pad-head{ margin-bottom: 20px; }
.lg-pad-title{ font-size: 26px; font-weight: 680; margin: 8px 0 0; letter-spacing:0; }

.lg-display{
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}
.lg-slot{
  flex: 1 1 0;
  height: 64px;
  border-radius: var(--r-btn);
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}
.lg-slot.is-filled{ border-color: var(--accent-line); background: var(--accent-weak); }
.lg-slot-char{ font-size: 28px; font-weight: 680; }

.lg-keypad{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.lg-key{
  height: 84px;
  border-radius: var(--r-btn);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font-size: 30px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .12s, transform .04s, border-color .12s;
}
.lg-key:hover{ background: var(--surface-3); }
.lg-key:active{ transform: translateY(1px); background: var(--surface-3); }
.lg-key-alt{ color: var(--accent); }

.lg-actions{
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 12px;
  margin-top: 16px;
}
.lg-act{ height: 60px; }
.lg-act-go{ font-size: 17px; }
[hidden]{ display:none !important; }

/* ---------- TWO FACTOR AUTH ---------- */
.tfa-card{ grid-template-columns: 320px 1fr; }
.tfa-card-narrow{ width: min(780px, 100%); }
.tfa-pad{ display:flex; flex-direction:column; justify-content:center; }
.tfa-grid{
  display:grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 20px;
  align-items:center;
  margin-bottom: 22px;
}
.tfa-qr-wrap{
  width:100%;
  aspect-ratio: 1;
  display:grid;
  place-items:center;
  border-radius: var(--r-btn);
  background:#fff;
  padding: 12px;
}
.tfa-qr{ width:100%; }
.tfa-qr svg,
.tfa-qr img{ display:block; width:100%; max-width:100%; height:auto; }
.qr-fallback{
  display:grid;
  place-items:center;
  min-height:120px;
  padding:12px;
  color:#38423d;
  text-align:center;
  font-size:13px;
  font-weight:700;
  line-height:1.35;
}
.tfa-copy{
  min-width:0;
  padding: 16px;
  border-radius: var(--r-btn);
  border:1px solid var(--line);
  background: var(--surface-2);
}
.tfa-label{
  display:block;
  margin-bottom: 9px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 650;
}
.tfa-secret{
  overflow-wrap:anywhere;
  color: var(--text);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.45;
}
.tfa-hint{ margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; }
.tfa-form{ display:flex; flex-direction:column; gap: 12px; }
.tfa-code{
  width:100%;
  height:72px;
  border-radius: var(--r-btn);
  border:1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--text);
  font-family:inherit;
  font-size: 32px;
  font-weight: 680;
  letter-spacing: 8px;
  text-align:center;
  outline:none;
}
.tfa-code:focus{ border-color: var(--accent-line); background: var(--surface-3); }
.tfa-error{ margin: 0; }
.tfa-check{
  display:flex;
  align-items:center;
  gap: 10px;
  min-height: 44px;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 550;
}
.tfa-check input{
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
.tfa-actions{
  grid-template-columns: 1fr 1.4fr;
  margin-top: 4px;
}

.kc-shake{ animation: kcShake .34s ease; }
@keyframes kcShake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-7px); }
  40%{ transform: translateX(7px); }
  60%{ transform: translateX(-5px); }
  80%{ transform: translateX(5px); }
}

@media (max-width: 720px){
  .lg-card{ grid-template-columns: 1fr; }
  .lg-aside{ flex-direction: row; align-items: center; gap: 20px; }
  .lg-aside-bottom{ display:none; }
  .tfa-grid{ grid-template-columns: 1fr; }
}

/* ---------- DASHBOARD ---------- */
.db-grid{ display:grid; grid-template-columns: 1fr 360px; gap: var(--gap); align-items:start; }
@media (max-width: 980px){ .db-grid{ grid-template-columns: 1fr; } }

.db-agenda{ display:flex; flex-direction:column; min-height: 0; }
.db-agenda-body{ padding: 8px 12px 14px; max-height: calc(100vh - var(--header-h) - 220px); overflow-y:auto; }
.db-empty{ padding: 32px 16px; color: var(--text-2); text-align:center; font-size:15px; }

.db-group{ padding: 10px 8px 4px; }
.db-group-head{ display:flex; align-items:center; gap:12px; padding: 8px 10px; }
.db-group-day{ font-size: 13px; font-weight: 650; color: var(--text); letter-spacing:0; }
.db-group-line{ flex:1; height:1px; background: var(--line); }
.db-group-count{ font-size:12px; font-weight:600; color: var(--text-3); min-width:22px; height:22px; display:grid; place-items:center; border-radius:999px; background: var(--surface-2); }
.db-group-rows{ display:flex; flex-direction:column; gap:6px; }

/* agenda row */
.ag-row{
  display:grid; grid-template-columns: auto 64px 1fr auto; align-items:center; gap: 14px;
  width:100%; text-align:left; cursor:pointer;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-btn);
  padding: 12px 14px; transition: background .12s, border-color .12s;
}
.ag-row:hover{ background: var(--surface-2); border-color: var(--line); }
.ag-rail{ width:4px; height:38px; border-radius:999px; background: var(--m); }
.ag-time{ display:flex; flex-direction:column; line-height:1.25; }
.ag-time-start{ font-size:15px; font-weight:650; }
.ag-time-end{ font-size:12.5px; color: var(--text-3); }
.ag-body{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.ag-title{ font-size:15.5px; font-weight:600; letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ag-meta{ display:flex; align-items:center; gap:8px; font-size:13px; color: var(--text-2); }
.ag-meta svg{ color: var(--text-3); }
.ag-sep{ color: var(--text-3); }
.ag-by{ display:inline-flex; align-items:center; gap:6px; }
.ag-loc{ display:inline-flex; align-items:center; gap:5px; min-width:0; max-width:170px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ag-loc svg{ color: var(--text-3); flex:0 0 auto; }
.ag-chev{ color: var(--text-3); }
.ag-row:hover .ag-chev{ color: var(--text-2); }

/* right rail */
.db-rail{ display:flex; flex-direction:column; gap: var(--gap); }
.db-today-head{ display:flex; align-items:center; justify-content:space-between; }
.db-today-date{ font-size:13px; color: var(--text-2); font-weight:550; }
.db-today-count{ display:flex; align-items:center; gap:16px; margin: 18px 0 16px; }
.db-today-num{ font-size:56px; font-weight:700; line-height:.9; letter-spacing:0; }
.db-today-lbl{ font-size:14px; color: var(--text-2); line-height:1.3; }
.db-next{
  display:block; width:100%; text-align:left; position:relative;
  background: var(--surface-2); border:1px solid var(--line); border-radius: var(--r-btn);
  padding: 14px 16px 14px 22px; cursor:pointer; transition: background .12s;
}
.db-next:hover{ background: var(--surface-3); }
.db-next-rail{ position:absolute; left:10px; top:14px; bottom:14px; width:4px; border-radius:999px; background: var(--m); }
.db-next-eyebrow{ display:block; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--text-3); }
.db-next-title{ display:block; font-size:16px; font-weight:620; margin-top:5px; }
.db-next-meta{ display:block; font-size:13px; color: var(--text-2); margin-top:4px; }

.db-quick{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.db-quick-btn{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  padding:16px; min-height:104px; cursor:pointer;
  background: var(--surface-2); border:1px solid var(--line); border-radius: var(--r-btn);
  color: var(--text); font-size:14.5px; font-weight:600;
  transition: background .12s, border-color .12s;
}
.db-quick-btn svg{ color: var(--text-2); }
.db-quick-btn:hover{ background: var(--surface-3); }
.db-quick-add{ color: var(--accent); border-color: var(--accent-line); background: var(--accent-weak); }
.db-quick-add svg{ color: var(--accent); }
.db-quick-add:hover{ background: var(--accent-weak); border-color: var(--accent); }

.db-knock{ display:flex; flex-direction:column; gap:14px; }
.db-knock-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.db-knock-title{ margin-top:6px; color:var(--text); font-size:15px; font-weight:650; }
.db-knock-icon{
  width:42px; height:42px; border-radius:var(--r-btn);
  display:grid; place-items:center;
  background:var(--accent-weak); border:1px solid var(--accent-line); color:var(--accent);
  flex:0 0 auto;
}
.db-knock-form{ display:flex; flex-direction:column; gap:12px; }
.db-knock-reasons{ display:flex; flex-direction:column; gap:8px; }
.db-knock-reason-label{ color:var(--text-3); font-size:12px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; }
.db-knock-reason-list{ display:flex; flex-wrap:wrap; gap:8px; }
.db-knock-reason{
  min-height:36px; max-width:100%; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-pill); border:1px solid var(--line-2);
  background:var(--surface-2); color:var(--text-2);
  font-size:13.5px; font-weight:650; cursor:pointer;
  transition:background .12s, border-color .12s, color .12s;
}
.db-knock-reason:hover{ background:var(--surface-3); color:var(--text); }
.db-knock-reason.is-on{ background:var(--accent-weak); border-color:var(--accent-line); color:var(--text); }
.db-knock-reason-input{ position:absolute; opacity:0; pointer-events:none; }
.db-knock-reason span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.db-knock-targets{ display:flex; flex-wrap:wrap; gap:8px; }
.db-knock-btn{
  min-height:40px; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--r-btn); border:1px solid var(--line-2);
  background:var(--surface-2); color:var(--text);
  font-size:14px; font-weight:650; cursor:pointer;
  transition:background .12s, border-color .12s, transform .04s;
}
.db-knock-btn:hover{ background:var(--surface-3); border-color:var(--text-3); }
.db-knock-btn:active{ transform:translateY(1px); }
.db-knock-btn.is-all{ background:var(--accent); border-color:transparent; color:var(--on-accent); }
.db-knock-btn.is-all:hover{ background:var(--accent-hover); }
.db-knock-empty{ padding:14px 8px 4px; text-align:left; }

.db-chat-preview{ display:flex; flex-direction:column; gap:14px; }
.db-chat-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.db-chat-link{ color: var(--accent); font-size:13px; font-weight:650; }
.db-chat-list{ display:flex; flex-direction:column; gap:8px; }
.db-chat-row{
  display:grid; grid-template-columns: 34px 1fr; gap:10px; align-items:start;
  padding:10px; border:1px solid transparent; border-radius: var(--r-btn);
  background: var(--surface-2); transition: background .12s, border-color .12s;
}
.db-chat-row:hover{ background: var(--surface-3); border-color: var(--line); }
.db-chat-avatar{
  width:34px; height:34px; border-radius:999px; display:grid; place-items:center;
  color:#fff; font-size:13px; font-weight:750; text-transform:uppercase;
}
.db-chat-body{ min-width:0; display:flex; flex-direction:column; gap:4px; }
.db-chat-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--text-3); font-size:12px; }
.db-chat-meta span:first-child{ color:var(--text-2); font-weight:650; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.db-chat-text{ color:var(--text); font-size:13.5px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.db-chat-empty{ padding:18px 10px; }

/* ---------- KNOCK ---------- */
.knock-page{ max-width: 980px; }
.knock-card{ overflow:hidden; }
.knock-card-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 24px; border-bottom:1px solid var(--line);
}
.knock-heading{ margin:6px 0 0; font-size:22px; font-weight:680; letter-spacing:0; }
.knock-form{ padding:22px 24px 24px; }
.knock-section{
  padding:18px; border-radius:var(--r-card);
  border:1px solid var(--line); background:var(--surface-2);
}
.knock-section + .knock-section{ margin-top:16px; }
.knock-section-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:12px;
}
.knock-section-note{ color:var(--text-3); font-size:13px; font-weight:600; }
.knock-reason-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px;
}
.knock-reason-choice{
  width:100%; min-height:54px; justify-content:flex-start;
  padding:0 15px; border-radius:var(--r-btn); background:var(--surface-1);
}
.knock-reason-choice span{ white-space:normal; line-height:1.25; }
.knock-target-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px;
}
.knock-target{
  width:100%; min-height:54px; justify-content:flex-start;
  padding:0 15px; background:var(--surface-1);
}
.knock-target.is-all{ justify-content:center; }
@media (max-width: 820px){
  .knock-reason-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .knock-target-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .knock-card-head{ align-items:flex-start; padding:18px; }
  .knock-form{ padding:16px; }
  .knock-section{ padding:14px; }
  .knock-section-head{ align-items:flex-start; flex-direction:column; gap:6px; }
  .knock-reason-grid,
  .knock-target-grid{ grid-template-columns:1fr; }
}

/* ---------- PHASE / SCOPE STATUS ---------- */
.scope-card{ margin-top: var(--gap); }
.scope-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}
.scope-field{
  background: var(--surface-2);
  border:1px solid var(--line);
  border-radius: var(--r-btn);
  padding: 14px 16px;
}
.scope-label{
  color: var(--text-3);
  font-size: 12px;
  font-weight: 650;
  letter-spacing:.06em;
  text-transform: uppercase;
}
.scope-value{
  margin-top: 8px;
  font-size: 16px;
  font-weight: 650;
}
.scope-members{ margin-top: 20px; }
.scope-member-list{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 10px;
}
.scope-member{
  min-height: 38px;
  display:inline-flex;
  align-items:center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  border:1px solid var(--line);
  background: var(--surface-2);
}
.scope-member-name{ font-size: 14px; font-weight: 650; }
.scope-member-meta{ color: var(--text-3); font-size: 13px; }
.scope-empty{ margin: 10px 0 0; }
@media (max-width: 720px){
  .scope-grid{ grid-template-columns: 1fr; }
}

/* ---------- CALENDAR ---------- */
.calendar-page{ padding-top: 24px; }
.calendar-filter{ gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.cal-card{ overflow:hidden; }
.cal-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 16px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.cal-nav-group{ display:flex; align-items:center; gap:10px; }
.cal-title{ font-size:19px; font-weight:650; letter-spacing:0; margin: 0 6px 0 8px; min-width: 200px; }
.cal-today{ height:44px; padding:0 16px; font-size:14px; }
.cal-seg{ display:flex; gap:4px; padding:4px; background: var(--surface-2); border:1px solid var(--line); border-radius: var(--r-btn); }
.cal-seg-btn{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border:none; background:transparent; color: var(--text-2); font-size:14.5px; font-weight:600; border-radius: calc(var(--r-btn) - 4px); cursor:pointer; transition: background .12s, color .12s; }
.cal-seg-btn.is-on{ background: var(--surface-1); color: var(--text); box-shadow: 0 1px 0 var(--line); }
.cal-seg-btn.is-on svg{ color: var(--accent); }
.cal-toolbar-right{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cal-new{ height:48px; padding:0 18px; }

/* month */
.cal-dow{ display:grid; grid-template-columns: repeat(7, 1fr); padding: 10px 0; border-bottom:1px solid var(--line); }
.cal-dow-cell{ text-align:left; padding-left: 14px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--text-3); }
.cal-grid{ display:grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(112px, 1fr); }
.cal-cell{
  text-align:left; background: transparent; border:none; cursor:pointer;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding: 8px 8px 10px; display:flex; flex-direction:column; gap:6px; min-width:0;
  transition: background .12s;
}
.cal-cell:nth-child(7n){ border-right:none; }
.cal-grid > .cal-cell:nth-last-child(-n+7){ border-bottom:none; }
.cal-cell:hover{ background: var(--surface-2); }
.cal-cell.is-out{ background: rgba(0,0,0,.14); }
.cal-cell.is-out .cal-cell-num{ color: var(--text-3); }
.cal-cell-num{ font-size:14px; font-weight:600; width:28px; height:28px; display:grid; place-items:center; border-radius:999px; }
.cal-cell.is-today .cal-cell-num{ background: var(--accent); color: var(--on-accent); }
.cal-cell-events{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.cal-chip{
  display:flex; align-items:center; gap:6px; min-width:0;
  padding: 3px 8px 3px 7px; border-radius: 7px;
  background: color-mix(in oklab, var(--m) 16%, var(--surface-2));
  border-left: 3px solid var(--m);
}
.cal-chip-time{ font-size:11px; font-weight:650; color: var(--text-2); flex:0 0 auto; }
.cal-chip-title{ font-size:12px; font-weight:550; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-more{ font-size:11px; color: var(--text-3); font-weight:600; padding-left:4px; }
.calendar-lower{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: var(--gap); align-items:start; }
.calendar-cat-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.calendar-cat-dot{ width:9px; height:9px; border-radius:999px; flex:0 0 auto; }
.calendar-empty-inline{ display:inline-flex; min-height:28px; align-items:center; font-size:14px; }

/* week */
.cal-week{ display:grid; grid-template-columns: repeat(7, 1fr); min-height: 440px; }
.cal-wcol{ border-right:1px solid var(--line); display:flex; flex-direction:column; }
.cal-wcol:last-child{ border-right:none; }
.cal-wcol.is-today{ background: var(--accent-weak); }
.cal-wcol-head{ display:flex; align-items:center; gap:8px; padding: 12px 12px; border-bottom:1px solid var(--line); background:transparent; border-left:none; border-right:none; border-top:none; cursor:pointer; width:100%; }
.cal-wcol-head:hover{ background: var(--surface-2); }
.cal-wcol.is-today .cal-wcol-head:hover{ background: transparent; }
.cal-wcol-dow{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--text-3); }
.cal-wcol-num{ font-size:16px; font-weight:680; }
.cal-wcol-num.is-today{ background: var(--accent); color: var(--on-accent); width:26px; height:26px; border-radius:999px; display:grid; place-items:center; font-size:14px; }
.cal-wcol-body{ padding: 8px; display:flex; flex-direction:column; gap:6px; }
.cal-wcol-empty{ text-align:center; color: var(--text-3); padding-top: 18px; }
.cal-wev{
  text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:3px; position:relative;
  background: color-mix(in oklab, var(--m) 14%, var(--surface-1));
  border:1px solid var(--line); border-left:3px solid var(--m); border-radius: 8px;
  padding: 8px 10px; transition: background .12s;
}
.cal-wev:hover{ background: color-mix(in oklab, var(--m) 24%, var(--surface-1)); }
.cal-wev-time{ font-size:11.5px; font-weight:650; color: var(--text-2); }
.cal-wev-title{ font-size:13px; font-weight:600; line-height:1.25; }
.cal-wev-by{ position:absolute; top:8px; right:8px; }

/* ---------- DAY ---------- */
.day-split{ display:grid; grid-template-columns: 380px 1fr; gap: var(--gap); align-items:start; }
@media (max-width: 980px){ .day-split{ grid-template-columns: 1fr; } }

.day-list{ overflow:hidden; }
.day-list-inner{ padding: 10px; display:flex; flex-direction:column; gap:6px; max-height: calc(100vh - var(--header-h) - 170px); overflow-y:auto; }
.day-li{
  display:grid; grid-template-columns: auto 56px 1fr auto; align-items:center; gap:12px;
  text-align:left; cursor:pointer; width:100%;
  background: transparent; border:1px solid transparent; border-radius: var(--r-btn);
  padding: 12px 12px; transition: background .12s, border-color .12s;
}
.day-li:hover{ background: var(--surface-2); }
.day-li.is-active{ background: var(--surface-2); border-color: var(--line-2); }
.day-li-rail{ width:4px; height:40px; border-radius:999px; background: var(--m); }
.day-li-time{ display:flex; flex-direction:column; font-size:15px; font-weight:650; line-height:1.3; }
.day-li-end{ font-size:12px; color: var(--text-3); font-weight:500; }
.day-li-main{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.day-li-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-width:0; }
.day-li-loc{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color: var(--text-3); min-width:0; max-width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.day-li-loc svg{ color: var(--text-3); flex:0 0 auto; }
.day-li-title{ font-size:15.5px; font-weight:620; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.day-li-dot{ }

.day-detail{ min-height: 460px; max-height: calc(100vh - var(--header-h) - 170px); overflow-y:auto; }
.dd{ padding: 26px 28px 24px; }
.dd-head{ position:relative; padding-left: 18px; margin-bottom: 24px; }
.dd-head-rail{ position:absolute; left:0; top:4px; bottom:4px; width:4px; border-radius:999px; background: var(--m); }
.dd-cat{ margin-bottom: 12px; }
.dd-title{ font-size: 28px; font-weight: 700; letter-spacing:0; margin: 0 0 12px; }
.dd-time{ display:inline-flex; align-items:center; gap:9px; font-size:16px; font-weight:600; color: var(--text); }
.dd-time svg{ color: var(--text-2); }

.dd-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
@media (max-width:560px){ .dd-grid{ grid-template-columns:1fr; } }
.dd-field{ background: var(--surface-2); border:1px solid var(--line); border-radius: var(--r-btn); padding: 14px 16px; }
.dd-label{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--text-3); margin-bottom:8px; }
.dd-value{ display:flex; align-items:center; gap:8px; font-size:15.5px; font-weight:550; }
.dd-value svg{ color: var(--text-2); }
.dd-value-muted{ color: var(--text-3); font-weight:500; }
.dd-subvalue{ display:flex; align-items:center; gap:6px; margin-top:7px; font-size:13px; color: var(--text-3); }
.dd-subvalue svg{ color: var(--text-3); }

.dd-block{ margin-bottom: 22px; }
.dd-message{ font-size:15.5px; line-height:1.55; color: var(--text); margin:0; opacity:.92; }

.dd-shop{ display:flex; flex-direction:column; gap:2px; }
.dd-shop-item{ display:flex; align-items:center; gap:0; padding: 0; border-radius: var(--r-btn); background: var(--surface-2); border:1px solid var(--line); overflow:hidden; }
.dd-shop-toggle{ flex:1; min-width:0; margin:0; align-self:stretch; display:flex; }
.dd-shop-check-btn{ display:grid; place-items:center; padding: 12px 0 12px 14px; background:transparent; border:none; cursor:pointer; }
.dd-check{ width:24px; height:24px; border-radius:999px; display:grid; place-items:center; border:1px solid var(--line-2); color: var(--text-3); flex:0 0 auto; transition: background .12s, border-color .12s; }
.dd-shop-item.is-done .dd-check{ background: var(--accent); border-color: transparent; color: var(--on-accent); }
.dd-shop-mainbtn{ flex:1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 12px 14px; background:transparent; border:none; cursor:pointer; text-align:left; min-width:0; }
.dd-shop-mainbtn:hover{ background: var(--surface-3); }
.dd-shop-main{ flex:1; font-size:15px; font-weight:550; color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dd-shop-item.is-done .dd-shop-main{ text-decoration: line-through; color: var(--text-3); }
.dd-shop-by{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color: var(--text-2); white-space:nowrap; }
.dd-shop-del{ width:46px; align-self:stretch; display:grid; place-items:center; background:transparent; border:none; border-left:1px solid var(--line); color: var(--text-3); cursor:pointer; transition: background .12s, color .12s; }
.dd-shop-del:hover{ background: rgba(224,138,138,.12); color: #e08a8a; }
.dd-shop-item form{ margin:0; align-self:stretch; display:flex; }
.dd-shop-del.is-disabled{ cursor:default; opacity:.28; }
.dd-shop-del.is-disabled:hover{ background:transparent; color: var(--text-3); }
.dd-shop-empty{ padding: 14px; color: var(--text-3); font-size:14px; text-align:center; }

/* add row */
.dd-add{ display:flex; align-items:center; gap:10px; margin-top: 12px; }
.dd-add-by{ display:flex; gap:4px; }
.dd-add-dot{ width:38px; height:46px; display:grid; place-items:center; background: var(--surface-2); border:1px solid var(--line); border-radius: var(--r-btn); cursor:pointer; transition: all .12s; }
.dd-add-dot:hover{ background: var(--surface-3); }
.dd-add-dot.is-on{ border-color: var(--m); background: color-mix(in oklab, var(--m) 18%, var(--surface-2)); }
.dd-add-dot .kc-dot{ width:12px; height:12px; opacity:.55; }
.dd-add-dot.is-on .kc-dot{ opacity:1; }
.dd-add-input{
  flex:1; min-width:0; height:46px; background: var(--surface-2); border:1px solid var(--line-2);
  border-radius: var(--r-btn); color: var(--text); font-family:inherit; font-size:15px; font-weight:550;
  padding: 0 14px; outline:none; transition: border-color .12s;
}
.dd-add-input::placeholder{ color: var(--text-3); }
.dd-add-input:focus{ border-color: var(--accent-line); }
.dd-add-btn{
  height:46px; padding: 0 16px; display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  background: var(--accent-weak); border:1px solid var(--accent-line); border-radius: var(--r-btn);
  color: var(--accent); font-size:14.5px; font-weight:650; cursor:pointer; transition: background .12s;
}
.dd-add-btn:hover{ background: color-mix(in oklab, var(--accent) 22%, var(--surface-1)); }
.dd-add-btn.is-disabled{ opacity:.4; pointer-events:none; }

.dd-rsvp{ display:flex; flex-direction:column; gap:8px; }
.dd-rsvp-row{ display:flex; align-items:center; justify-content:space-between; padding: 13px 16px; border-radius: var(--r-btn); background: var(--surface-2); border:1px solid var(--line); }
.dd-rsvp-form{ gap:12px; margin:0; }
.dd-rsvp-who{ display:flex; align-items:center; gap:9px; font-size:15px; font-weight:600; }
.dd-rsvp-state{ display:flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color: var(--text-2); }
.dd-rsvp-actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.dd-rsvp-choice{ min-height:32px; padding:0 11px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--text-2); font:inherit; font-size:12.5px; font-weight:650; cursor:pointer; }
.dd-rsvp-choice:hover{ background:var(--surface-3); color:var(--text); }
.dd-rsvp-choice.is-on{ border-color:var(--accent-line); background:var(--accent-weak); color:var(--text); }
.dd-rsvp-row.is-yes .dd-rsvp-state{ color: var(--accent); }
.dd-rsvp-row.is-no .dd-rsvp-state{ color: #e08a8a; }

.dd-footer{ display:flex; gap:12px; padding-top: 6px; border-top:1px solid var(--line); margin-top: 4px; padding-top: 22px; }
.dd-footer form{ margin:0; }

/* interactive shopping / rsvp */
.dd-label-row{ display:flex; align-items:center; justify-content:space-between; }
.dd-count{ font-size:12.5px; font-weight:600; color: var(--text-2); }
.dd-hint-inline{ font-weight:500; text-transform:none; letter-spacing:0; color: var(--text-3); font-size:12px; }
.dd-shop-item{ transition: background .12s, border-color .12s; }
.dd-rsvp-row{ width:100%; text-align:left; cursor:pointer; transition: background .12s, border-color .12s; }
.dd-rsvp-row:hover{ background: var(--surface-3); }
.dd-rsvp-row.is-yes{ border-color: var(--accent-line); }
.dd-rsvp-row.is-no{ border-color: rgba(224,138,138,.32); }

/* ---------- OVERLAY / MODAL ---------- */
.ov{
  position: fixed; inset: 0; z-index: 50;
  background: rgba(8,9,11,.66);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  padding: 28px;
}
.ov-nested{ background: rgba(8,9,11,.5); z-index: 60; }

.ne{
  width: min(720px, 100%);
  max-height: calc(100vh - 56px);
  display: flex; flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: 22px;
  overflow: hidden;
  animation: neIn .2s cubic-bezier(.2,.7,.3,1);
}
@keyframes neIn{ from{ transform: translateY(12px); } to{ transform:none; } }

.ne-head{ display:flex; align-items:center; justify-content:space-between; padding: 22px 24px 18px; border-bottom:1px solid var(--line); }
.ne-title{ font-size: 22px; font-weight: 680; letter-spacing:0; margin: 6px 0 0; }
.ne-body{ padding: 22px 24px; overflow-y:auto; display:flex; flex-direction:column; gap: 24px; }

.ne-section{ display:flex; flex-direction:column; gap: 10px; }
.ne-label{ font-size: 14px; font-weight: 650; letter-spacing:0; }
.ne-opt, .ne-snip-label{ font-weight:500; color: var(--text-3); font-size:12.5px; }

.ne-pickrow{ display:flex; gap:10px; flex-wrap:wrap; }
.ne-person{
  display:inline-flex; align-items:center; gap:9px; height:48px; padding:0 18px;
  border-radius: var(--r-btn); border:1px solid var(--line); background: var(--surface-2);
  color: var(--text-2); font-size:15px; font-weight:600; cursor:pointer; transition: all .12s;
}
.ne-person:hover{ background: var(--surface-3); }
.ne-person.is-on{ color: var(--text); border-color: var(--m); background: color-mix(in oklab, var(--m) 16%, var(--surface-2)); }

.ne-cats{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
.ne-cat{
  display:flex; align-items:center; gap:10px; height:54px; padding:0 14px;
  border-radius: var(--r-btn); border:1px solid var(--line); background: var(--surface-2);
  color: var(--text-2); font-size:14.5px; font-weight:600; cursor:pointer; transition: all .12s;
}
.ne-cat svg{ color: var(--text-3); }
.ne-cat:hover{ background: var(--surface-3); }
.ne-cat.is-on{ color: var(--text); border-color: var(--accent-line); background: var(--accent-weak); }
.ne-cat.is-on svg{ color: var(--accent); }

.ne-input{
  width:100%; background: var(--surface-2); border:1px solid var(--line-2); border-radius: var(--r-btn);
  color: var(--text); font-family: inherit; font-size:16px; font-weight:550; padding: 14px 16px;
  outline: none; transition: border-color .12s;
  color-scheme: dark;
}
.ne-input::placeholder{ color: var(--text-3); }
.ne-input:focus{ border-color: var(--accent-line); }
.ne-input[type="date"]::-webkit-calendar-picker-indicator,
.ne-input[type="time"]::-webkit-calendar-picker-indicator{
  filter: invert(1);
  opacity: .58;
}
.ne-input[type="date"]::-webkit-calendar-picker-indicator:hover,
.ne-input[type="time"]::-webkit-calendar-picker-indicator:hover{
  opacity: .82;
}
.ne-textarea{ resize:none; line-height:1.5; }

.ne-snip-head{ display:flex; align-items:center; justify-content:space-between; margin-top: 4px; }
.ne-more{
  display:inline-flex; align-items:center; gap:4px; background:transparent; border:none; cursor:pointer;
  color: var(--accent); font-size:13.5px; font-weight:650; padding:4px 2px;
}
.ne-more:hover{ text-decoration: underline; }

.ne-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.ne-chips-scroll{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
.ne-chip{
  display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 14px;
  border-radius: var(--r-pill); border:1px solid var(--line-2); background: var(--surface-2);
  color: var(--text); font-size:14px; font-weight:550; cursor:pointer; white-space:nowrap; transition: all .12s;
}
.ne-chip svg{ color: var(--text-3); }
.ne-chip:hover{ background: var(--surface-3); border-color: var(--text-3); }
.ne-chip-date.is-on{ background: var(--accent-weak); border-color: var(--accent-line); color: var(--text); }
.ne-chip.is-on{ background: var(--accent-weak); border-color: var(--accent-line); color: var(--text); }
.ne-chip-clear{ color: var(--text-2); }
.ne-chip-clear svg{ color: var(--text-3); }

/* Login: Vollbild-Button oben rechts */
.lg-fs{ position:absolute; top:24px; right:24px; z-index:5; background: var(--surface-1); }

/* ---------- SETTINGS ---------- */
.set-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items:start; }
@media (max-width: 820px){ .set-grid{ grid-template-columns: 1fr; } }
.set-card-wide{ grid-column: 1 / -1; }
.set-card-head{ margin-bottom: 18px; }
.set-card-hint{ margin: 6px 0 0; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }

.set-swatches{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1080px){ .set-swatches{ grid-template-columns: repeat(2, 1fr); } }
.set-swatch{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding: 16px 10px; border-radius: var(--r-btn);
  border:1px solid var(--line-2); background: var(--surface-2);
  cursor:pointer; transition: border-color .14s, background .14s, transform .08s;
}
.set-swatch:hover{ background: var(--surface-3); border-color: var(--text-3); }
.set-swatch:active{ transform: translateY(1px); }
.set-swatch.is-on{ border-color: var(--accent-line); background: var(--accent-weak); }
.set-swatch-chip{
  width: 46px; height: 46px; border-radius: 50%;
  display:grid; place-items:center;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 4px 12px rgba(0,0,0,.3);
}
.set-swatch-chip svg{ color: var(--on-accent); }
.set-swatch-label{ font-size: 13.5px; font-weight: 600; color: var(--text); }

.set-rows{ display:flex; flex-direction:column; gap: 16px; }
.set-row{ display:flex; align-items:center; justify-content:space-between; gap: 14px; flex-wrap:wrap; }
.set-row-label{ font-size: 15px; font-weight: 550; }
.set-seg{ display:inline-flex; padding: 4px; gap: 4px; background: var(--surface-2); border:1px solid var(--line-2); border-radius: var(--r-btn); }
.set-seg-btn{
  height: 38px; padding: 0 16px; border:0; background-color: transparent;
  color: var(--text-2); font-size: 14px; font-weight: 550; cursor:pointer;
  border-radius: calc(var(--r-btn) - 4px); transition: color .14s;
}
.set-seg-btn:hover{ color: var(--text); }
.set-seg-btn.is-on{ background-color: var(--accent); color: var(--on-accent); }

.set-field{ background: var(--surface-2); border:1px solid var(--line); border-radius: var(--r-btn); padding: 14px 16px; }
.set-field-label{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--text-3); margin-bottom:8px; }
.set-field-value{ display:flex; align-items:center; gap:8px; font-size:15.5px; font-weight:600; }
.set-field-value svg{ color: var(--text-2); }
.set-members{ display:flex; flex-direction:column; gap: 8px; }
.set-member{ display:flex; align-items:center; gap: 10px; padding: 12px 14px; background: var(--surface-2); border:1px solid var(--line); border-radius: var(--r-btn); }
.set-member-name{ font-size: 15px; font-weight: 600; }
.set-member-loc{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; font-size: 13.5px; color: var(--text-2); }
.set-member-loc svg{ color: var(--text-3); }
.set-alert{ margin:0 0 14px; }
.set-card .set-field{ margin-bottom:12px; }
.set-card .owner-field{ margin-top:14px; }
.set-member-label{ margin:18px 0 10px; }
.set-actions{
  grid-column:1 / -1; display:flex; justify-content:flex-end;
}
.set-trusted-card{ margin-top:var(--gap); }
.set-security-panel{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:18px; padding:14px 16px;
  border-radius:var(--r-btn); border:1px solid var(--line); background:var(--surface-2);
}
.set-security-main{ min-width:0; display:flex; flex-direction:column; gap:8px; }
.set-security-state{ display:flex; align-items:center; gap:8px; font-size:16px; font-weight:700; color:var(--text-2); }
.set-security-state.is-on{ color:var(--text); }
.set-security-dot{ width:10px; height:10px; border-radius:50%; background:var(--text-3); }
.set-security-state.is-on .set-security-dot{ background:var(--accent); box-shadow:0 0 0 4px var(--accent-weak); }
.set-security-meta{ color:var(--text-3); font-size:13px; font-weight:600; }
.set-security-panel form{ margin:0; }
.set-security-reset{ height:40px; padding:0 14px; }
.set-device-label{ margin:0 0 10px; }
.set-device-list{ display:flex; flex-direction:column; gap:8px; }
.set-device-row{
  display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:14px; align-items:center;
  padding:14px 16px; border-radius:var(--r-btn);
  border:1px solid var(--line); background:var(--surface-2);
}
.set-device-main{ min-width:0; display:flex; flex-direction:column; gap:7px; }
.set-device-title{ font-size:15px; font-weight:650; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.set-device-meta{ display:flex; flex-wrap:wrap; gap:8px; color:var(--text-3); font-size:12.5px; font-weight:600; }
.set-device-meta span{
  min-height:28px; display:inline-flex; align-items:center;
  padding:0 10px; border-radius:999px; border:1px solid var(--line); background:var(--surface-1);
}
.set-device-row form{ margin:0; }
.set-device-row .kc-iconbtn{ width:40px; height:40px; }

.set-summary{
  display:flex; align-items:center; gap:10px;
  min-height:44px; padding:0 14px;
  border-radius: var(--r-btn); border:1px solid var(--line);
  background: var(--surface-1);
}
.set-summary-number{ font-size:20px; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
.set-summary-label{ font-size:13px; color:var(--text-2); font-weight:600; }

.owner-choice-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--gap);
  margin-bottom:var(--gap);
}
.owner-choice{
  min-height:132px; display:flex; align-items:center; gap:18px;
  padding:24px; border-radius:var(--r-card);
  border:1px solid var(--line); background:var(--surface-1);
  transition:background .14s, border-color .14s, transform .04s;
}
.owner-choice:hover{ background:var(--surface-2); border-color:var(--line-2); }
.owner-choice:active{ transform:translateY(1px); }
.owner-choice.is-on{ border-color:var(--accent-line); background:var(--accent-weak); }
.owner-choice-number{
  min-width:72px; height:72px; display:grid; place-items:center;
  border-radius:var(--r-btn); background:var(--surface-2);
  color:var(--accent); font-size:34px; font-weight:760; font-variant-numeric:tabular-nums;
}
.owner-choice.is-on .owner-choice-number{ background:var(--accent); color:var(--on-accent); }
.owner-choice-code{ font-size:28px; letter-spacing:0; }
.owner-choice-text{ min-width:0; display:flex; flex-direction:column; gap:6px; }
.owner-choice-title{ font-size:22px; font-weight:700; color:var(--text); }
.owner-choice-sub{ font-size:14px; line-height:1.4; color:var(--text-2); }

.owner-form{
  padding:18px 20px 20px; border-radius:var(--r-card);
  border:1px solid var(--line); background:var(--surface-1);
}
.owner-form-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:16px;
}
.owner-form-title{ margin:4px 0 0; font-size:20px; font-weight:660; letter-spacing:0; }
.owner-form-save{ height:46px; padding:0 18px; }
.owner-form-alert{ margin:0 0 14px; }
.owner-form-grid{
  display:grid;
  grid-template-columns:minmax(180px, .7fr) minmax(240px, 1.4fr) minmax(120px, .45fr);
  gap:12px;
  align-items:start;
}
.owner-member-form-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.owner-family-form-grid{ grid-template-columns:1.2fr 1.2fr minmax(120px, .6fr); }
.owner-security-form-grid{ grid-template-columns:minmax(180px, 280px) minmax(240px, 1fr); align-items:end; }
.owner-security-hint{ min-width:0; }
.owner-field{ min-width:0; display:flex; flex-direction:column; gap:9px; }
.owner-field-content{ grid-column:1 / -1; }
.owner-edit-note{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin:0 0 14px; color:var(--text-3); font-size:13px; font-weight:600;
}
.owner-edit-note span{
  min-height:28px; display:inline-flex; align-items:center;
  padding:0 10px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2);
}
.owner-pin{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  margin:0 0 14px; padding:14px 16px;
  border-radius:var(--r-btn); border:1px solid var(--accent-line);
  background:var(--accent-weak);
}
.owner-pin-label{ font-size:12px; font-weight:650; color:var(--text-2); text-transform:uppercase; letter-spacing:.06em; }
.owner-pin-value{ margin-top:4px; font-size:26px; font-weight:760; color:var(--text); letter-spacing:2px; }
.owner-pin-hint{ max-width:360px; color:var(--text-2); font-size:13.5px; line-height:1.4; }
.owner-type-seg{
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  padding:4px; border-radius:var(--r-btn);
  border:1px solid var(--line); background:var(--surface-2);
}
.owner-type{
  height:46px; display:flex; align-items:center; justify-content:center;
  border-radius:calc(var(--r-btn) - 4px);
  color:var(--text-2); font-size:14.5px; font-weight:650;
  cursor:pointer; transition:background .12s, color .12s;
}
.owner-type:hover{ color:var(--text); }
.owner-type.is-on{ background:var(--surface-1); color:var(--text); box-shadow:0 1px 0 var(--line); }
.owner-section{ margin-top: var(--gap); }
.owner-section-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:10px;
}
.owner-section-title{ margin:4px 0 0; font-size:20px; font-weight:660; letter-spacing:0; }
.owner-count{
  min-width:32px; height:32px; padding:0 10px;
  display:inline-grid; place-items:center;
  border-radius:999px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--text-2);
  font-size:13px; font-weight:700; font-variant-numeric:tabular-nums;
}
.owner-user-list{ display:flex; flex-direction:column; gap:8px; }
.owner-user-row{
  display:grid; grid-template-columns:minmax(0, 1fr) auto auto; gap:16px; align-items:center;
  padding:14px 16px; border-radius:var(--r-btn);
  border:1px solid var(--line); background:var(--surface-1);
}
.owner-user-main{ display:flex; align-items:center; gap:12px; min-width:0; }
.owner-user-avatar{
  width:42px; height:42px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:50%; color:rgba(10,12,14,.82); font-size:16px; font-weight:750;
}
.owner-user-text{ min-width:0; display:flex; flex-direction:column; gap:5px; }
.owner-user-name{ font-size:15.5px; font-weight:680; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.owner-user-meta{ display:flex; align-items:center; gap:6px; color:var(--text-2); font-size:13.5px; }
.owner-user-meta svg{ color:var(--text-3); }
.owner-user-tags{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; color:var(--text-3); font-size:12.5px; font-weight:600; }
.owner-user-tags span{
  min-height:28px; display:inline-flex; align-items:center;
  padding:0 10px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2);
}
.owner-user-role{ color:var(--text-2); }
.owner-user-actions{ width:88px; display:flex; justify-content:flex-end; gap:8px; }
.owner-user-actions form{ margin:0; }
.owner-user-actions .kc-iconbtn{ width:40px; height:40px; }
.tb-list{ display:flex; flex-direction:column; gap:8px; }
.tb-row{
  display:grid; grid-template-columns:minmax(0, 1fr) auto auto; gap:16px; align-items:center;
  padding:16px 18px; border-radius:var(--r-btn);
  border:1px solid var(--line); background:var(--surface-1);
}
.tb-main{ min-width:0; display:flex; flex-direction:column; gap:6px; }
.tb-title{ font-size:15.5px; font-weight:650; color:var(--text); overflow-wrap:anywhere; }
.tb-content{ font-size:14px; line-height:1.45; color:var(--text-2); overflow-wrap:anywhere; }
.tb-meta{
  display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap;
  color:var(--text-3); font-size:12.5px; font-weight:600;
}
.tb-meta span{
  min-height:28px; display:inline-flex; align-items:center;
  padding:0 10px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface-2);
}
.tb-sort{ color:var(--text-2); }
.tb-actions{ display:flex; align-items:center; gap:8px; }
.tb-actions form{ margin:0; }
.tb-actions .kc-iconbtn{ width:40px; height:40px; }
.tb-delete{ color:#e08a8a; border-color:rgba(224,91,91,.34); }
.tb-delete:hover{ background:rgba(224,91,91,.12); border-color:rgba(224,91,91,.52); color:#e08a8a; }
@media (max-width: 960px){
  .owner-choice-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .owner-choice-grid{ grid-template-columns:1fr; }
  .owner-choice{ min-height:112px; padding:18px; }
  .owner-choice-number{ min-width:58px; height:58px; font-size:28px; }
  .owner-form-head{ align-items:stretch; flex-direction:column; }
  .owner-form-save{ width:100%; }
  .owner-form-grid{ grid-template-columns:1fr; }
  .owner-pin{ align-items:flex-start; flex-direction:column; }
  .set-security-panel{ align-items:stretch; flex-direction:column; }
  .set-security-reset{ width:100%; }
  .set-device-row{ grid-template-columns:1fr; }
  .set-device-title{ white-space:normal; overflow-wrap:anywhere; }
  .set-device-row form{ display:flex; justify-content:flex-end; }
  .owner-user-row{ grid-template-columns:1fr; }
  .owner-user-tags{ justify-content:flex-start; }
  .owner-user-actions{ width:100%; }
  .tb-row{ grid-template-columns:1fr; align-items:start; }
  .tb-meta{ justify-content:flex-start; }
  .tb-actions{ width:100%; justify-content:flex-end; }
}

/* ---------- CHAT ---------- */
.chat-page{ height: 100%; box-sizing: border-box; display:flex; flex-direction:column; padding-bottom: 24px; }
.chat-head{ margin-bottom: 18px; }
.chat-members{ display:flex; gap:8px; flex-wrap:wrap; }
.chat-member-chip{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); font-size:13px; font-weight:550; color:var(--text-2); }

.chat-card{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden; padding:0; }
.chat-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; padding: 20px 22px 10px; display:flex; flex-direction:column; gap:3px; }

.chat-daysep{ display:flex; align-items:center; justify-content:center; margin: 2px 0 12px; }
.chat-daysep span{ font-size:12px; font-weight:600; color:var(--text-3); background:var(--surface-2); padding:4px 12px; border-radius:999px; }

.chat-msg{ display:flex; align-items:flex-end; gap:10px; max-width: 78%; }
.chat-msg.is-them{ align-self:flex-start; }
.chat-msg.is-me{ align-self:flex-end; flex-direction:row-reverse; }
.chat-msg.is-first{ margin-top: 12px; }
.chat-ava{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color: rgba(10,12,14,.82); font-size:13px; font-weight:700; flex:0 0 auto; }
.chat-bubwrap{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.chat-name{ font-size:12.5px; font-weight:650; padding-left:4px; }
.chat-bubble{ padding: 9px 13px; border-radius: 16px; background: var(--surface-2); border:1px solid var(--line); display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.chat-msg.is-them .chat-bubble{ border-bottom-left-radius:5px; }
.chat-msg.is-me .chat-bubble{ background: var(--accent-weak); border-color: var(--accent-line); border-bottom-right-radius:5px; }
.chat-text{ font-size:14.5px; line-height:1.45; color:var(--text); white-space:pre-wrap; word-break:break-word; }
.chat-time{ font-size:11px; color:var(--text-3); margin-left:auto; white-space:nowrap; align-self:flex-end; }
.chat-del-form{ margin:0; display:inline-flex; align-self:flex-end; }
.chat-del{
  width:24px; height:24px; display:grid; place-items:center;
  border-radius:999px; border:1px solid var(--line);
  background:rgba(0,0,0,.10); color:var(--text-3);
  padding:0; line-height:0;
  cursor:pointer; transition:background .12s, color .12s;
}
.chat-del svg{ display:block; }
.chat-del:hover{ background:rgba(224,91,91,.14); color:#e08a8a; }

.chat-input{ flex:0 0 auto; display:flex; align-items:center; gap:10px; padding: 14px 16px; border-top:1px solid var(--line); background: var(--surface-1); position:relative; }
.chat-field{ flex:1 1 auto; height:46px; padding:0 16px; border-radius: var(--r-btn); background: var(--surface-2); border:1px solid var(--line-2); color:var(--text); font-size:15px; font-family:inherit; outline:none; transition: border-color .12s; }
.chat-field:focus{ border-color: var(--accent-line); }
.chat-field::placeholder{ color: var(--text-3); }
.chat-send{ width:46px; height:46px; flex:0 0 auto; display:grid; place-items:center; border-radius: var(--r-btn); border:0; background: var(--accent); color: var(--on-accent); cursor:pointer; transition: opacity .12s; }
.chat-send.is-disabled{ opacity:.4; pointer-events:none; }
.chat-error{
  position:absolute; left:16px; right:16px; bottom:100%;
  margin-bottom:8px; padding:10px 12px;
  border-radius:var(--r-btn); border:1px solid rgba(224,91,91,.4);
  background:rgba(224,91,91,.10); color:#e08a8a;
  font-size:13px; font-weight:600;
}

@media (max-width: 640px){
  .chat-msg{ max-width: 92%; }
  .chat-input{ padding:12px; }
}

/* Schnellzugriff: Chat-Badge */
.db-quick-icon{ position:relative; display:inline-flex; }
.db-quick-badge{ position:absolute; top:-8px; right:-11px; }

.ne-tiles{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.ne-tile{
  text-align:left; padding: 12px 14px; border-radius: var(--r-btn);
  border:1px solid var(--line); background: var(--surface-2);
  color: var(--text-2); font-size:14px; font-weight:500; line-height:1.4; cursor:pointer; transition: all .12s;
}
.ne-tile:hover{ background: var(--surface-3); color: var(--text); border-color: var(--text-3); }

.ne-times{ display:flex; flex-wrap:wrap; gap:8px; }
.ne-time{
  height:44px; min-width:64px; padding:0 14px; border-radius: var(--r-btn);
  border:1px solid var(--line); background: var(--surface-2);
  color: var(--text); font-size:15px; font-weight:600; cursor:pointer; font-variant-numeric:tabular-nums; transition: all .12s;
}
.ne-time:hover{ background: var(--surface-3); }
.ne-time.is-on{ background: var(--accent-weak); border-color: var(--accent-line); }

.ne-foot{ display:flex; justify-content:flex-end; gap:12px; padding: 18px 24px; border-top:1px solid var(--line); }
.ne-foot .kc-btn{ min-width: 130px; }
.ne-foot .kc-btn-danger{ margin-right:auto; }
.ne-page-form{ width:100%; max-height:none; }
.ne-choice-input{ position:absolute; opacity:0; pointer-events:none; }
.ne-form-alert{ margin: 0 24px 14px; padding: 12px 14px; border:1px solid rgba(224,91,91,.4); border-radius: var(--r-btn); color:#e08a8a; background: rgba(224,91,91,.08); }
.ne-form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.ne-form-grid .ne-section{ min-width:0; }
@media (max-width: 720px){ .ne-form-grid{ grid-template-columns: 1fr; } }
.is-disabled{ opacity:.4; pointer-events:none; }
.kc-btn-danger{
  background: rgba(224,91,91,.10);
  border-color: rgba(224,91,91,.34);
  color: #e08a8a;
}
.kc-btn-danger:hover{ background: rgba(224,91,91,.16); border-color: rgba(224,91,91,.52); }

/* snippet picker (nested modal) */
.sp{
  width: min(560px, 100%); max-height: calc(100vh - 80px);
  display:flex; flex-direction:column;
  background: var(--surface-1); border:1px solid var(--line-2); border-radius: 20px; overflow:hidden;
  animation: neIn .18s cubic-bezier(.2,.7,.3,1);
}
.sp-head{ display:flex; align-items:center; justify-content:space-between; padding: 18px 20px; border-bottom:1px solid var(--line); }
.sp-title{ font-size:18px; font-weight:650; margin:0; }
.sp-body{ padding: 16px 20px 20px; overflow-y:auto; display:flex; flex-direction:column; gap:20px; }
.sp-group-label{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--text-3); margin-bottom:10px; }
.sp-group-label svg{ color: var(--text-2); }
.sp-list{ display:flex; flex-wrap:wrap; gap:8px; }
.sp-item{
  text-align:left; padding: 11px 15px; border-radius: var(--r-pill);
  border:1px solid var(--line-2); background: var(--surface-2);
  color: var(--text); font-size:14.5px; font-weight:550; cursor:pointer; transition: all .12s;
}
.sp-item:hover{ background: var(--accent-weak); border-color: var(--accent-line); }

@media (max-width: 560px){
  .ne-cats{ grid-template-columns: repeat(2, 1fr); }
  .ne-tiles{ grid-template-columns: 1fr; }
}

@media (max-width: 820px){
  .calendar-filter{ justify-content:flex-start; }
  .cal-toolbar{ align-items:stretch; }
  .cal-nav-group,
  .cal-toolbar-right{ width:100%; }
  .cal-title{ flex:1 1 auto; min-width:120px; }
  .cal-seg{ flex:1 1 auto; }
  .cal-seg-btn{ flex:1 1 0; justify-content:center; padding:0 10px; }
  .calendar-lower{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .cal-dow-cell{ padding-left: 7px; font-size:11px; }
  .cal-grid{ grid-auto-rows: minmax(92px, auto); }
  .cal-cell{ padding:6px 5px; gap:4px; }
  .cal-cell-num{ width:24px; height:24px; font-size:13px; }
  .cal-cell-events{ gap:5px; }
  .cal-chip{
    width:28px;
    height:8px;
    padding:0;
    gap:0;
    border-left:0;
    border-radius:999px;
    background: var(--m);
  }
  .cal-chip-time{ display:none; }
  .cal-chip-title{ display:none; }
  .cal-more{ font-size:10.5px; }
}