/* ── LAYOUT ── */
.cd-main   { max-width: 1060px; margin: 0 auto; padding: 24px 24px 60px; }
.cd-layout { display: grid; grid-template-columns: 1fr 280px; gap: 20px; align-items: start; }
.cd-right  { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 20px; }

/* ── COUNTDOWN CARD ── */
.cd-card { padding: 24px; display: flex; flex-direction: column; width: 100%; }

/* FORM */
.cd-form { width: 100%; display: flex; flex-direction: column; gap: 16px; margin-bottom: 8px; }
.cd-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cd-form-group { display: flex; flex-direction: column; gap: 6px; }
.cd-form-group .label { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.05em; }
.cd-input { width: 100%; height: 42px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-card); color: var(--text); padding: 0 12px; outline: none; font-size: 14px; font-weight: 500; font-family: inherit; }
.cd-input:focus { border-color: var(--text); }

/* ACTIVE VIEW */
.cd-active-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; }
.cd-target-title { font-size: 24px; font-weight: 700; color: var(--text); margin-bottom: 24px; line-height: 1.2; word-break: break-word; }

.cd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; max-width: 480px; margin-bottom: 28px; }
.cd-segment { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-muted); border: 1px solid var(--border); padding: 14px 10px; border-radius: var(--radius-lg); min-width: 70px; }
.cd-num { font-family: var(--font-mono); font-size: 40px; font-weight: 600; color: var(--text); line-height: 1; }
.cd-lbl { font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.05em; margin-top: 6px; }

/* COMPLETED STATE */
.cd-finished { font-size: 20px; font-weight: 600; color: #2aa198; margin: 20px 0; display: none; }

/* SHARE BOX */
.cd-share-box { width: 100%; max-width: 480px; padding: 16px; background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.cd-share-title { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.05em; text-align: left; }
.cd-share-row { display: flex; gap: 8px; }
.cd-share-input { flex: 1; height: 38px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-card); color: var(--text); padding: 0 10px; font-size: 12px; font-family: var(--font-mono); outline: none; }
.cd-share-btn { height: 38px; padding: 0 16px; font-size: 13px; font-weight: 600; cursor: pointer; }

/* SAVED LIST IN SIDEBAR */
.cd-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.cd-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: var(--radius); background: var(--bg-muted); border: 1px solid var(--border); text-decoration: none; color: var(--text); transition: all 0.12s; }
.cd-item:hover { background: var(--bg-card); border-color: var(--text); }
.cd-item-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cd-item-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-item-date { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
.cd-item-del { background: none; border: none; padding: 4px 8px; color: var(--text-muted); cursor: pointer; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; transition: all 0.1s; }
.cd-item-del:hover { color: #b91c1c; background: rgba(185, 28, 28, 0.08); }
.cd-list-empty { font-size: 12px; color: var(--text-muted); text-align: center; padding: 12px 0; }

/* ── RESPONSIVE ── */
@media (max-width: 800px) {
  .cd-layout { grid-template-columns: 1fr; }
  .cd-right { position: static; }
}
@media (max-width: 560px) {
  .cd-main { padding: 16px 14px 40px; }
  .cd-form-row { grid-template-columns: 1fr; }
  .cd-num { font-size: 30px; }
  .cd-lbl { font-size: 9px; }
}

/* ── LANG SWITCHER ── */
.lang-switcher { position: relative; }
.lang-current { display:flex;align-items:center;gap:5px;padding:5px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);font-size:12px;font-weight:500;color:var(--text);cursor:pointer;font-family:var(--font-sans); }
.lang-code { font-family:var(--font-mono);font-size:11px;color:var(--text-muted); }
.lang-menu { display:none;position:absolute;top:calc(100% + 6px);right:0;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 8px 24px rgba(0,0,0,.10);z-index:200;padding:6px;width:210px;max-height:340px;overflow-y:auto; }
.lang-menu.open { display:flex;flex-direction:column; }
.lang-option { display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius);font-size:13px;color:var(--text);text-decoration:none;transition:background .12s; }
.lang-option:hover { background:var(--bg-muted); }
.lang-option.active { background:var(--accent);font-weight:500; }