.czr-wiz {
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 2px 0 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
}
.czr-wiz-card {
background: #ffffff;
border-radius: 22px;
box-shadow: 0 4px 32px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
overflow: hidden;
border: 1px solid rgba(0,0,0,0.06);
} .czr-wiz-head {
background: linear-gradient(135deg, #0f2b4c 0%, #1a4a7c 60%, #1565a0 100%);
padding: 22px 20px 18px;
text-align: center;
}
.czr-wiz-badge {
display: inline-block;
background: rgba(255,255,255,0.15);
color: rgba(255,255,255,0.85);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 20px;
margin-bottom: 10px;
border: 1px solid rgba(255,255,255,0.2);
}
.czr-wiz-title {
color: #fff;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
margin: 0;
line-height: 1.2;
}
.czr-wiz-subtitle {
color: rgba(255,255,255,0.6);
font-size: 13px;
margin: 6px 0 0;
} .czr-wiz-steps {
display: flex;
align-items: center;
justify-content: center;
padding: 14px 20px 0;
background: #fff;
}
.czr-step-dot {
width: 28px; height: 28px;
border-radius: 50%;
background: #f0f0f4;
color: #8e8e93;
font-size: 12px;
font-weight: 700;
display: flex; align-items: center; justify-content: center;
transition: all .3s ease;
flex-shrink: 0;
z-index: 1;
}
.czr-step-dot.active { background: #0071e3; color: #fff; box-shadow: 0 0 0 4px rgba(0,113,227,0.15); }
.czr-step-dot.done   { background: #34c759; color: #fff; }
.czr-step-line {
flex: 1;
height: 2px;
background: #e5e5ea;
margin: 0 4px;
transition: background .3s ease;
}
.czr-step-line.done { background: #34c759; } .czr-wiz-body {
padding: 16px 16px 20px;
background: #fff;
}
.czr-panel { display: none; animation: czrFadeUp .3s ease; }
.czr-panel.active { display: block; }
@keyframes czrFadeUp {
from { opacity:0; transform:translateY(10px); }
to   { opacity:1; transform:translateY(0); }
}
.czr-panel-label {
font-size: 11px; font-weight: 700; color: #8e8e93;
text-transform: uppercase; letter-spacing: 0.08em;
margin-bottom: 12px; display: block;
} .czr-device-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.czr-device-card {
border: 2px solid #e5e5ea;
border-radius: 16px;
padding: 16px 10px;
text-align: center;
cursor: pointer;
transition: all .2s cubic-bezier(0.34,1.56,0.64,1);
background: #fafafa;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.czr-device-card:active { transform: scale(0.95); }
.czr-device-card.selected {
border-color: #0071e3;
background: #f0f7ff;
box-shadow: 0 0 0 4px rgba(0,113,227,0.1);
}
.czr-device-icon { font-size: 32px; display: block; margin-bottom: 7px; line-height: 1; }
.czr-device-name { font-size: 14px; font-weight: 600; color: #1d1d1f; }
.czr-device-card.selected .czr-device-name { color: #0071e3; } .czr-select-wrap { position: relative; }
.czr-select-wrap select {
width: 100%; height: 52px;
padding: 0 40px 0 16px;
border: 2px solid #e5e5ea;
border-radius: 14px;
background: #fafafa;
font-size: 15px; font-weight: 500; color: #1d1d1f;
appearance: none; -webkit-appearance: none;
outline: none; box-sizing: border-box;
transition: border-color .2s, box-shadow .2s;
font-family: inherit;
}
.czr-select-wrap select:focus {
border-color: #0071e3;
box-shadow: 0 0 0 4px rgba(0,113,227,0.1);
background: #fff;
}
.czr-select-wrap::after {
content: '⌄'; position: absolute; right:15px; top:50%;
transform: translateY(-52%); color:#8e8e93;
pointer-events:none; font-size:18px; line-height:1;
} .czr-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.czr-pills .czr-pill,
button.czr-pill {
border: 2px solid #e5e5ea !important;
border-radius: 30px !important;
padding: 10px 16px !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #3a3a3c !important;
background: #fafafa !important;
cursor: pointer !important;
transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease !important;
-webkit-tap-highlight-color: transparent !important;
user-select: none !important;
line-height: 1.3 !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
touch-action: manipulation !important;
box-shadow: none !important;
outline: none !important;
text-decoration: none !important;
}
.czr-pills .czr-pill.pressing,
button.czr-pill.pressing {
transform: scale(0.93) !important;
background: #e8f0fb !important;
border-color: #5a9ef5 !important;
color: #1d4ed8 !important;
box-shadow: none !important;
}
.czr-pills .czr-pill:active,
button.czr-pill:active {
transform: scale(0.93) !important;
background: #e8f0fb !important;
border-color: #5a9ef5 !important;
color: #1d4ed8 !important;
}
.czr-pills .czr-pill.selected,
button.czr-pill.selected {
border-color: #0071e3 !important;
background: #0071e3 !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(0,113,227,0.3) !important;
}
.czr-multi-hint {
font-size: 12px; color: #8e8e93; margin-bottom: 10px; display: block;
} .czr-summary {
background: #f5f5f7; border-radius: 12px;
padding: 10px 14px; margin-bottom: 14px;
font-size: 13px; color: #3a3a3c;
display: flex; align-items: center; gap: 6px;
} .czr-nav { display: flex; gap: 10px; margin-top: 18px; }
.czr-btn-back {
flex: 0 0 auto; height: 52px; width: 52px;
border: 2px solid #e5e5ea; border-radius: 14px;
background: #fff; font-size: 20px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: #3a3a3c; transition: all .2s ease;
-webkit-tap-highlight-color: transparent;
}
.czr-btn-back:active { transform: scale(0.95); background: #f5f5f7; }
.czr-btn-next {
flex: 1; height: 52px; border-radius: 14px;
background: #0071e3; color: #fff;
font-size: 16px; font-weight: 700; border: none; cursor: pointer;
transition: all .25s ease;
display: flex; align-items: center; justify-content: center; gap: 8px;
-webkit-tap-highlight-color: transparent; font-family: inherit;
}
.czr-btn-next:disabled { background: #d1d1d6; cursor: not-allowed; }
.czr-btn-next:not(:disabled):active { transform: scale(0.97); background: #0077ed; }
.czr-btn-next:not(:disabled):hover  { background: #0077ed; box-shadow: 0 6px 18px rgba(0,113,227,0.35); } .czr-btn-wa {
display: flex; align-items: center; justify-content: center; gap: 10px;
width: 100%; height: 56px; border-radius: 14px;
background: #25d366; color: #fff;
font-size: 17px; font-weight: 700; text-decoration: none;
cursor: pointer; border: none;
transition: all .25s ease; font-family: inherit; margin-top: 18px;
-webkit-tap-highlight-color: transparent;
animation: czrPulse 2s ease infinite;
}
.czr-btn-wa:active { transform: scale(0.97); }
@keyframes czrPulse {
0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,0.3); }
50%      { box-shadow: 0 8px 30px rgba(37,211,102,0.55); }
} .czr-result-summary {
background: linear-gradient(135deg, #f0f7ff, #e8f4ff);
border: 1px solid #bfdbfe; border-radius: 16px; padding: 16px; margin-bottom: 4px;
}
.czr-result-row {
display: flex; justify-content: space-between; align-items: flex-start;
padding: 7px 0; border-bottom: 1px solid rgba(0,113,227,0.1); font-size: 14px;
}
.czr-result-row:last-child { border-bottom: none; }
.czr-result-key { color: #8e8e93; font-weight: 500; flex-shrink: 0; margin-right: 10px; }
.czr-result-val { color: #1d1d1f; font-weight: 700; text-align: right; }
.czr-reset-btn {
width: 100%; margin-top: 10px; background: none; border: none;
color: #8e8e93; font-size: 13px; cursor: pointer; padding: 8px; font-family: inherit;
}
@media (min-width: 992px) {
.czr-wiz { max-width: 1040px; }
.czr-wiz-card { display: grid; grid-template-columns: 340px 1fr; border-radius: 28px; }
.czr-wiz-head { border-radius: 0; padding: 40px 30px; display: flex; flex-direction: column; justify-content: center; }
.czr-wiz-title { font-size: 30px; }
}