.period-output,.period-settings,.period-editor{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin:20px 0}
.period-output{text-align:center}.period-output img{display:block;max-width:100%;height:auto;margin:auto;border-radius:8px}.period-editor p{color:var(--text-dim);font-size:.9rem}
.period-editor button{background:var(--accent);color:var(--bg);border:0;border-radius:8px;padding:10px 18px;font-weight:600;cursor:pointer}
.period-share{justify-content:center;flex-wrap:nowrap}
.period-share a,.period-share button{box-sizing:border-box;flex:1 1 0;min-width:0;margin:0;padding:6px 8px;border:0;border-radius:8px;background:var(--accent);color:var(--bg);font:inherit;font-size:.85rem;font-weight:600;line-height:1.4;text-align:center;text-decoration:none;white-space:normal;cursor:pointer}
.period-share a:hover,.period-share button:hover{background:var(--accent);opacity:.9}
.period-share button.is-done{border:0;background:var(--money);color:#fff}
.period-option-toggle{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 16px;margin:12px 0 0;padding:0;border:0;color:var(--text-dim);font-size:.9rem}
.period-option-toggle legend{float:left;margin-right:10px}
.period-option-toggle label{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.period-settings .period-option-toggle{flex-basis:100%;justify-content:flex-start}
.period-settings .period-option-toggle label{display:inline-flex;flex-direction:row}
.period-settings{display:flex;flex-wrap:wrap;gap:14px}.period-settings legend{font-weight:700}.period-settings label{display:flex;flex-direction:column;gap:5px}.period-settings input,.period-settings select,.period-editor textarea{background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;padding:9px;color:var(--text)}.period-editor textarea{display:block;width:100%;font:inherit;font-family:monospace;resize:vertical;box-sizing:border-box;margin:12px 0}
.period-settings input[type=color]{width:48px;height:40px;padding:3px}
.period-tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin:0 0 16px}.period-tabs .period-tab{background:transparent;color:var(--text-dim);border:1px solid transparent;border-bottom:0;border-radius:8px 8px 0 0;padding:8px 16px}.period-tabs .period-tab.is-active{background:var(--bg-elev);color:var(--text);border-color:var(--border)}
.period-row{display:grid;grid-template-columns:minmax(100px,1.2fr) repeat(3,minmax(120px,1fr)) 48px auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}.period-row input[type=text],.period-row input[type=date]{min-width:0;width:100%;background:var(--bg-elev);border:1px solid var(--border);border-radius:7px;padding:8px;color:var(--text)}.period-row input[type=color]{width:38px;height:36px;padding:2px;background:var(--bg-elev);border:1px solid var(--border);border-radius:7px}.period-row button{padding:8px 12px}
@media(max-width:620px){.period-row{grid-template-columns:1fr 1fr 42px auto}.period-row input[type=text]{grid-column:1/-1}.period-row input[type=date]{font-size:.82rem;padding:7px 4px}}