:root{--bg:#faf9f7;--card:#fff;--card-opacity:0.6;--input-bg:rgba(255,255,255,0.5);--text:#222;--muted:#6b6b6b;--accent:#1976d2}

/* Make sizing predictable and avoid overflow from padding/border */
*, *::before, *::after { box-sizing: border-box; }

body{font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial; background:var(--bg); color:var(--text); margin:0;padding:20px}
.container{
    max-width:1000px;
    margin:0 auto;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
h2{margin:0 0 12px}
.editor-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start}
.sidebar{width:240px}
/* ensure flex children can shrink to avoid overflow */
.editor-row > div { min-width: 0; }
.card{background: rgba(255,255,255,var(--card-opacity));border-radius:8px;padding:12px;box-shadow:0 6px 18px rgba(31,43,58,0.06);backdrop-filter: blur(4px)}
label{font-weight:600;font-size:13px;color:var(--muted);display:block;margin-bottom:6px}
/* ensure inputs respect container size and don't cause overflow */
input,textarea,select{width:100%;padding:8px;border:1px solid #e6e6e6;border-radius:6px;background:var(--input-bg);min-width:0}
/* allow textarea to resize vertically only and avoid overlap */
textarea{min-height:160px;max-height:60vh;height:320px;resize:vertical;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, 'Courier New', monospace;background: rgba(255,255,255,0.5)}
.controls{display:flex;gap:8px;margin:8px 0;align-items:center}
.btn{padding:8px 10px;border-radius:6px;border:1px solid #cfcfcf;background:white;cursor:pointer}
.btn.primary{background:var(--accent);color:white;border-color:rgba(0,0,0,0.08)}

.hide-text{background:#f3f6fb;border-radius:4px;padding:2px 6px;color:var(--muted)}

/* allow direct children to shrink inside flex containers */
.card > div, .card > .toolbar, .card > input {min-width:0}

.alert{border-radius:6px;padding:10px;margin:8px 0}
.alert-title{font-weight:700;margin-bottom:6px}
.alert.success{background:#e8f5e9;border:1px solid #c8e6c9;color:#1b5e20}
.alert.fail{background:#ffebee;border:1px solid #ffcdd2;color:#b71c1c}
.alert.warn{background:#fff8e1;border:1px solid #ffecb3;color:#8a6d00}
.alert.warning{background:#fff8e1;border:1px solid #ffecb3;color:#8a6d00}

.toolbar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.toolbar .btn{padding:6px 8px;font-size:13px}
.controls{align-items:center;display:flex}

.date-wrap{position:relative}
.date-wrap input{padding-right:72px}
.date-wrap .btn.small{position:absolute;right:6px;top:6px;padding:6px 8px;font-size:12px;display:none}
.date-wrap:focus-within .btn.small{display:block}