/* BorDoc — Předplatné (správa / management). Tokens from colors_and_type.css; top bar reuses .rs-* */

.sm-shell{height:100vh;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-app)}
.sm-main{flex:1;overflow-y:auto}
.sm-inner{max-width:760px;margin:0 auto;padding:30px 40px 72px}

.plex{font-family:"IBM Plex Mono","Roboto Mono",monospace;font-variant-numeric:tabular-nums}

/* head */
.sm-crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--fg3);margin-bottom:10px}
.sm-crumb a{color:var(--accent-text);text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.sm-crumb a:hover{text-decoration:underline}
.sm-crumb .lic{width:14px;height:14px}
.sm-head h1{font-size:28px;font-weight:500;color:var(--fg1);letter-spacing:-0.01em;margin:0 0 24px}

/* block */
.sm-block{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px 24px;margin-bottom:18px}
.sm-block-h{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--fg3);margin:0 0 16px}
.sm-block-text{font-size:14px;color:var(--fg2);line-height:1.5;margin:0 0 16px}

/* current plan card */
.sm-plan-top{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.sm-plan-name{font-size:22px;font-weight:500;color:var(--fg1)}
.sm-plan-active{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:var(--success);background:var(--success-tint);border-radius:var(--radius-full);padding:3px 11px}
.sm-plan-active .lic{width:13px;height:13px}
.sm-plan-price{font-size:14.5px;color:var(--fg2);margin-bottom:5px}
.sm-plan-price .plex{color:var(--fg1);font-size:22px;font-weight:500}
.sm-plan-was{color:var(--fg3)!important;text-decoration:line-through;font-size:16px!important;font-weight:400!important}
.sm-plan-year{font-size:13px;color:var(--fg2);margin-bottom:5px}
.sm-plan-promo{font-size:12px;color:var(--attention-text);margin-bottom:4px}
.sm-plan-save{font-size:12px;color:var(--success);margin-bottom:20px}
.sm-renew{display:flex;align-items:flex-start;gap:12px;margin-top:6px;padding-top:14px;border-top:1px solid var(--border)}
.sm-renew-text{flex:1}
.sm-renew-h{font-size:13.5px;font-weight:500;color:var(--fg1);margin-bottom:3px}
.sm-renew-text p{font-size:12.5px;color:var(--fg3);line-height:1.45;margin:0}
/* monthly → annual upgrade callout */
.sm-upgrade{display:flex;align-items:center;gap:14px;background:var(--success-tint);border:1px solid var(--green-100);border-radius:var(--radius-md);padding:14px 16px;margin-bottom:20px}
.sm-upgrade > .lic{color:var(--success);flex:none}
.sm-upgrade-body{flex:1;min-width:0;font-size:13.5px;color:var(--fg1);line-height:1.45}
.sm-upgrade-total{font-size:13px;font-weight:500;color:var(--success);margin-top:6px}
.sm-upgrade .btn{flex:none}
/* dynamic per-section annual savings (orange accent) */
.sm-saving{font-size:12px;color:var(--attention-text);margin-top:8px;line-height:1.6}
.sm-saving-total{font-weight:500}

.sm-rows{display:flex;flex-direction:column;gap:15px}
.sm-usage-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:7px}
.sm-usage-label{font-size:13.5px;color:var(--fg2)}
.sm-usage-val{font-size:13.5px;color:var(--fg1)}
.sm-bar{height:6px;border-radius:var(--radius-full);background:var(--bg-subtle);overflow:hidden}
.sm-bar-fill{height:100%;border-radius:var(--radius-full);background:var(--accent)}
/* multi-meter usage */
.sm-meter + .sm-meter{margin-top:4px}
.sm-meter-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:7px}
.sm-meter-label{font-size:13.5px;color:var(--fg2)}
.sm-meter-shared{font-size:12px;color:var(--fg3);margin:-2px 0 8px;line-height:1.4}
.sm-meter-val{font-size:13.5px;color:var(--fg1)}
.sm-legend{display:flex;flex-wrap:nowrap;gap:8px 14px;margin-top:10px}
.sm-legend-item{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--fg2);white-space:nowrap}
.sm-dot{width:9px;height:9px;border-radius:var(--radius-full);flex:none}
.sm-legend-item .n{color:var(--fg1)}
/* advance (hatched) bar */
.sm-bar-hatch{height:6px;border-radius:var(--radius-full);border:1px solid var(--border);background-color:var(--bg-subtle);background-image:repeating-linear-gradient(45deg,transparent,transparent 3px,rgba(55,138,221,.28) 3px,rgba(55,138,221,.28) 6px)}
.sm-advance-note{font-size:11.5px;color:var(--fg3);line-height:1.45;margin-top:7px}
.sm-stat{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13.5px;padding-top:13px;border-top:1px solid var(--border)}
.sm-stat .k{color:var(--fg2);display:inline-flex;align-items:center;gap:8px}
.sm-stat .k .lic{width:16px;height:16px;color:var(--fg3)}
.sm-stat .v{color:var(--fg1)}

/* counter */
.sm-counter{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-subtle);padding:14px 16px;margin-bottom:16px}
.sm-counter-label{display:block;font-size:12.5px;font-weight:500;color:var(--fg2);margin-bottom:10px}
.sm-counter-row{display:flex;align-items:center;gap:14px}
.sm-step{width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg-surface);color:var(--fg1);font-size:18px;line-height:1;cursor:pointer;transition:background var(--dur) var(--ease)}
.sm-step:hover:not(:disabled){background:var(--bg-hover)}
.sm-step:disabled{color:var(--fg3);opacity:.45;cursor:not-allowed}
.sm-counter-val{font-size:18px;font-weight:500;color:var(--fg1);min-width:28px;text-align:center}
.sm-counter-sum{font-size:13px;color:var(--fg2);margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.sm-counter-sum .plex{color:var(--fg1)}
.sm-was{color:var(--fg3)!important;text-decoration:line-through;font-weight:400}

/* doc-extension subsections */
.sm-subsec{margin-top:18px}
.sm-subsec:first-of-type{margin-top:4px}
.sm-subsec-h{font-size:13.5px;font-weight:500;color:var(--fg1);margin-bottom:10px}
.sm-subsec-text{font-size:13px;color:var(--fg2);margin:0 0 12px}
.sm-subsec-note{font-size:11.5px;color:var(--fg3);margin-top:12px;line-height:1.45}
/* period segmented control */
.sm-seg{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.sm-seg button{flex:1;min-width:0;font-size:12.5px;color:var(--fg2);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 12px;cursor:pointer;transition:all var(--dur) var(--ease);text-align:center}
.sm-seg button:hover{background:var(--bg-hover)}
.sm-seg button.active{border-color:var(--accent);background:var(--blue-050);color:var(--accent-text);font-weight:500}
/* one-time tiles */
.sm-onetime{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sm-ot-tile{position:relative;display:flex;flex-direction:column;gap:5px;text-align:left;padding:13px 14px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-surface);cursor:pointer;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.sm-ot-tile:hover{border-color:var(--border-strong)}
.sm-ot-tile.active{border-color:var(--accent);background:var(--blue-050);box-shadow:var(--ring-focus)}
.sm-ot-q{font-size:13px;color:var(--fg2);padding-right:24px}
.sm-ot-p{font-size:15px;font-weight:500;color:var(--fg1);display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.sm-ot-p .sm-was{font-size:12px}
.sm-ot-check{position:absolute;top:11px;right:11px;width:18px;height:18px;border-radius:var(--radius-full);border:1.5px solid var(--border-strong);display:flex;align-items:center;justify-content:center;color:#fff}
.sm-ot-tile.active .sm-ot-check{background:var(--accent);border-color:var(--accent)}

@media (max-width:560px){.sm-onetime{grid-template-columns:1fr}}

/* cancel block — less prominent */
.sm-block.sm-cancel{background:var(--bg-app)}
.sm-block.sm-cancel .sm-block-h{color:var(--fg3)}

/* modal */
.sm-overlay{position:fixed;inset:0;background:rgba(21,24,28,.45);display:flex;align-items:center;justify-content:center;padding:24px;z-index:50;animation:rs-fade var(--dur) var(--ease)}
.sm-modal{width:100%;max-width:460px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:24px;animation:rs-rise var(--dur-slow) var(--ease)}
.sm-modal-ic{width:40px;height:40px;border-radius:var(--radius-md);background:var(--attention-tint);color:var(--attention-text);display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px}
.sm-modal h2{margin:0 0 8px;font-size:18px;font-weight:500;color:var(--fg1);letter-spacing:var(--tracking-tight)}
.sm-modal p{margin:0;font-size:14.5px;line-height:1.55;color:var(--fg2)}
.sm-modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}