:root{
  --gap:1rem;
  --radius:4px;
  --transition:.15s ease-in-out;
  --shadow:0 2px 6px rgba(0,0,0,.06);

  --c-border:#cfd3db;
  --c-prim:#005a9c;
  --c-prim-light:#e5f0fa;
  --c-bg:#f9fbfd;
  --c-err:#c62828;

  font-size:16px;
}
*,
*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.4;
  background:var(--c-bg);
  color:#222;
}

/* === 1. LAYOUT (sidebar + content) === */
.page-wrapper{display:flex;align-items:flex-start;max-width:1440px;margin:0 auto;}
main{flex:1;min-width:0;}
/* Sidebar */
.toc{
  position:sticky;top:1rem;left:0;
  max-height:calc(100vh - 2rem);
  overflow-y:auto;
  padding:1rem .5rem;
  margin-right:1rem;
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow);
  width:230px;
}
.toc ol{list-style:none;display:flex;flex-direction:column;gap:.35rem;}
.toc a{
  display:block;
  padding:.35rem .6rem;
  border-radius:var(--radius);
  font-size:.9rem;text-decoration:none;
  color:#222;
  transition:background var(--transition);
}
.toc a:hover{background:var(--c-prim-light);}
.toc a.active{background:var(--c-prim);color:#fff;font-weight:600;}

/* Mobile: sidebar превращается в off‑canvas */
.toc-toggle{
  display:none;
  position:fixed;bottom:1rem;right:1rem;
  width:3rem;height:3rem;
  border:none;border-radius:50%;
  background:var(--c-prim);color:#fff;
  font-size:1.5rem;z-index:999;
  box-shadow:var(--shadow);cursor:pointer;
}
@media(max-width:899px){
  .page-wrapper{flex-direction:column;}
  .toc{
    position:fixed;inset:0 auto 0 0;
    transform:translateX(-110%);
    transition:transform .25s ease;
    z-index:998;width:260px;
  }
  .toc.open{transform:none;}
  .toc-toggle{display:block;}
}

/* === 2. FORM & ACCORDION === */
.form-section{
  margin:2.5rem 0;
  padding:2rem;
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:background var(--transition);
}
.form-section>h2{
  margin:-.5rem -1rem 1.25rem;   /* визуально вытягиваем на весь блок */
  padding:1rem;
  font-size:1.3rem;
  background:var(--c-prim-light);
  color:var(--c-prim);
  border-radius:var(--radius);
  cursor:pointer;
  user-select:none;
  display:flex;align-items:center;justify-content:space-between;
}
.form-section>h2::after{
  content:"⌄";
  font-size:1.1rem;
  transition:transform .25s ease;
}
.form-section.is-collapsed>h2::after{transform:rotate(-90deg);}
.form-section.is-collapsed>*:not(h2){display:none;}

fieldset{border:none;margin:0 0 1.5rem;padding:0;}
legend{font-weight:600;margin-bottom:.5rem;}

.grid{display:grid;gap:var(--gap);}
@media(min-width:600px){.grid-cols-2{grid-template-columns:repeat(2,1fr);}}
@media(min-width:900px){
  .grid-cols-3{grid-template-columns:repeat(3,1fr);}
  .grid-cols-4{grid-template-columns:repeat(4,1fr);}
}

/* === 3. FORM CONTROLS === */
input,select,textarea{
  margin-top:.25rem;
  padding:.5rem .75rem;
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  width:100%;
  background:#fff;
  transition:border var(--transition),box-shadow var(--transition);
}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;border-color:var(--c-prim);
  box-shadow:0 0 0 3px rgba(0,90,156,.25);
}
input:invalid:not(:placeholder-shown){border-color:var(--c-err);}
.helper{margin-top:.15rem;font-size:.75rem;color:#6c7584;}

/* === 4. CUSTOM CHECKBOX === */
.checkbox-inline{display:flex;align-items:center;gap:.5rem;font-weight:500;margin:.25rem 0;}
.checkbox-inline input[type=checkbox]{
  appearance:none;width:1rem;height:1rem;
  border:2px solid var(--c-border);
  border-radius:4px;position:relative;cursor:pointer;flex:none;
  transition:background var(--transition),border var(--transition);
}
.checkbox-inline input[type=checkbox]:checked{background:var(--c-prim);border-color:var(--c-prim);}
.checkbox-inline input[type=checkbox]:checked::after{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.5 2.5L9 1' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/80% no-repeat;
}

/* === 5. BUTTONS === */
.btn{
  background:var(--c-prim);border:none;color:#fff;
  cursor:pointer;padding:.55rem 1.1rem;border-radius:var(--radius);
  font-weight:600;transition:background var(--transition);
}
.btn:hover{background:#004e9e;}
.btn-remove{all:unset;cursor:pointer;color:var(--c-err);
  position:absolute;top:-1.1rem;right:-0.5rem;font-size:1.4rem;
}

/* === 6. REPEATABLE BLOCK === */
.repeatable-wrapper{
  background:#fff;border:1px dashed var(--c-border);
  border-radius:var(--radius);padding:var(--gap);
  margin-bottom:1.25rem;position:relative;box-shadow:var(--shadow);
}

/* === 7. UTILS === */
.is-hidden,[hidden]{display:none !important;}

/* === 8. SAFARI / iOS FIXES (select & date) === */
@supports (-webkit-touch-callout:none){
  select{
    -webkit-appearance:none;
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='%23333'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-position:right .75rem center;
    background-repeat:no-repeat;
    background-size:.7rem;
    padding-right:2rem;
  }
	  /* 7.2. У input[type=date] оставляем пикер кликабельным, но убираем дефолтную иконку */
	  input[type="date"]{
	  -webkit-appearance: none;
	  appearance: none;
	  min-width: 100%;            /* ширина как у остальных полей */
	  min-height: auto;        /* либо высота, какая нужна */
	}

	/* патч из WebKit-багзиллы — работает даже в старых iOS 12 */
	input[type="date"]::-webkit-date-and-time-value{
	  height: 1.2em;              /* подгоните под свой шрифт */
	}
	.checkbox-inline input[type=checkbox]{
		appearance:none;
	}
}