:root{
    --ui-bg:#f6f7fb;
    --ui-card:#ffffff;
    --ui-text:#111827;
    --ui-muted:#6b7280;
    --ui-border:#e5e7eb;

    --ui-blue-bg:#f8fbff;
    --ui-blue-bg-2:#f3f8ff;
    --ui-blue-border:#dbeafe;

    --ui-green-bg:#f8fff9;
    --ui-green-bg-2:#f2fcf4;
    --ui-green-border:#bbf7d0;

    --ui-purple-bg:#fcfaff;
    --ui-purple-bg-2:#f8f4ff;
    --ui-purple-border:#e9d5ff;

    --ui-gold-bg:#fffdf7;
    --ui-gold-bg-2:#fff8eb;
    --ui-gold-border:#fde68a;

    --ui-orange-bg:#fffaf5;
    --ui-orange-bg-2:#fff1e6;
    --ui-orange-border:#fdba74;

    --ui-gray-bg:#f8fafc;
    --ui-gray-bg-2:#f3f4f6;
    --ui-gray-border:#e5e7eb;

    --ui-primary:#2563eb;
    --ui-primary-hover:#1d4ed8;
    --ui-success:#16a34a;
    --ui-success-hover:#15803d;
    --ui-danger:#dc2626;
    --ui-danger-soft:#fecaca;
}

.ui-page{
    max-width: 1280px;
    margin: 0 auto;
}

.ui-page-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
    flex-wrap:wrap;
}

.ui-page-header-title{
    font-size:26px;
    font-weight:900;
    color:var(--ui-text);
    margin:0;
}

.ui-page-header-subtitle{
    color:var(--ui-muted);
    font-size:13px;
    margin-top:6px;
    line-height:1.7;
}

.ui-page-header-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
}

.ui-card{
    border:1px solid var(--ui-border);
    border-radius:22px;
    padding:18px;
    box-shadow:0 10px 24px rgba(15,23,42,.05);
    background:var(--ui-card);
    margin-bottom:16px;
}

.ui-card--summary{
    background:linear-gradient(180deg, var(--ui-gray-bg) 0%, var(--ui-gray-bg-2) 100%);
    border-color:var(--ui-gray-border);
}

.ui-card--basic{
    background:linear-gradient(180deg, var(--ui-blue-bg) 0%, var(--ui-blue-bg-2) 100%);
    border-color:var(--ui-blue-border);
}

.ui-card--content{
    background:linear-gradient(180deg, var(--ui-green-bg) 0%, var(--ui-green-bg-2) 100%);
    border-color:var(--ui-green-border);
}

.ui-card--relation{
    background:linear-gradient(180deg, var(--ui-purple-bg) 0%, var(--ui-purple-bg-2) 100%);
    border-color:var(--ui-purple-border);
}

.ui-card--finance{
    background:linear-gradient(180deg, var(--ui-gold-bg) 0%, var(--ui-gold-bg-2) 100%);
    border-color:var(--ui-gold-border);
}

.ui-card--warning{
    background:linear-gradient(180deg, var(--ui-orange-bg) 0%, var(--ui-orange-bg-2) 100%);
    border-color:var(--ui-orange-border);
}

.ui-card-title{
    font-size:18px;
    font-weight:900;
    margin:0 0 6px;
    color:var(--ui-text);
}

.ui-card-subtitle{
    font-size:12px;
    color:var(--ui-muted);
    margin-bottom:14px;
    line-height:1.7;
}

.ui-grid-1{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
}

.ui-grid-2{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:14px;
}

.ui-grid-3{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:14px;
}

.ui-grid-4{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:14px;
}

.ui-field{
    min-width:0;
}

.ui-label{
    display:block;
    margin-bottom:6px;
    font-size:13px;
    font-weight:700;
    color:#4b5563;
}

.ui-input,
.ui-select,
.ui-textarea{
    width:100%;
    border:1px solid #d1d5db;
    border-radius:12px;
    padding:10px 12px;
    background:#fff;
    color:var(--ui-text);
    font-size:14px;
}

.ui-input[readonly],
.ui-input[disabled],
.ui-select[disabled],
.ui-textarea[readonly]{
    background:#f3f4f6;
    color:var(--ui-muted);
    cursor:not-allowed;
}

.ui-textarea{
    resize:vertical;
    min-height:110px;
}

.ui-help{
    font-size:12px;
    color:var(--ui-muted);
    margin-top:6px;
    line-height:1.7;
}

.ui-error{
    font-size:12px;
    color:var(--ui-danger);
    margin-top:6px;
    font-weight:700;
}

.ui-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:18px;
    align-items:center;
}

.ui-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:12px;
    padding:10px 14px;
    font-weight:700;
    text-decoration:none;
    border:1px solid transparent;
    cursor:pointer;
    transition:.18s ease;
}

.ui-btn-primary{
    background:var(--ui-primary);
    color:#fff;
    border-color:var(--ui-primary);
}
.ui-btn-primary:hover{
    background:var(--ui-primary-hover);
    border-color:var(--ui-primary-hover);
}

.ui-btn-success{
    background:var(--ui-success);
    color:#fff;
    border-color:var(--ui-success);
}
.ui-btn-success:hover{
    background:var(--ui-success-hover);
    border-color:var(--ui-success-hover);
}

.ui-btn-soft{
    background:#f3f4f6;
    color:var(--ui-text);
    border-color:var(--ui-border);
}
.ui-btn-soft:hover{
    background:#e5e7eb;
}

.ui-btn-danger{
    background:#fff;
    color:var(--ui-danger);
    border-color:var(--ui-danger-soft);
}
.ui-btn-danger:hover{
    background:#fef2f2;
}

.ui-meta-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:12px;
}

.ui-meta-box{
    background:#fff;
    border:1px solid var(--ui-blue-border);
    border-radius:14px;
    padding:12px;
}

.ui-meta-key{
    font-size:12px;
    color:var(--ui-muted);
    margin-bottom:6px;
    font-weight:700;
}

.ui-meta-value{
    font-size:15px;
    font-weight:800;
    color:var(--ui-text);
}

@media (max-width: 950px){
    .ui-grid-4,
    .ui-grid-3,
    .ui-grid-2,
    .ui-meta-grid{
        grid-template-columns:1fr;
    }
}


/* =========================================
   Colorful Form Cards System
   ========================================= */

.form-card{
  border:1px solid #e5e7eb;
  border-radius:22px;
  padding:18px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
  margin-bottom:16px;
  transition:.18s ease;
}

.form-card:hover{
  box-shadow:0 14px 30px rgba(15,23,42,.07);
}

.form-card__title{
  font-size:18px;
  font-weight:900;
  margin:0 0 6px;
  color:#111827;
  line-height:1.4;
}

.form-card__subtitle{
  font-size:12px;
  color:#6b7280;
  margin-bottom:14px;
  line-height:1.7;
}

.form-card__body{
  min-width:0;
}

/* Variants */
.form-card--summary{
  background:linear-gradient(180deg, #f8fbff 0%, #f3f8ff 100%);
  border-color:#dbeafe;
}

.form-card--basic{
  background:linear-gradient(180deg, #f8fff9 0%, #f2fcf4 100%);
  border-color:#bbf7d0;
}

.form-card--content{
  background:linear-gradient(180deg, #fcfaff 0%, #f8f4ff 100%);
  border-color:#e9d5ff;
}

.form-card--relation{
  background:linear-gradient(180deg, #f7fcff 0%, #eef8ff 100%);
  border-color:#cfe8ff;
}

.form-card--finance{
  background:linear-gradient(180deg, #fffdf7 0%, #fff8eb 100%);
  border-color:#fde68a;
}

.form-card--warning{
  background:linear-gradient(180deg, #fffaf5 0%, #fff1e6 100%);
  border-color:#fdba74;
}

.form-card--danger{
  background:linear-gradient(180deg, #fff7f7 0%, #fef2f2 100%);
  border-color:#fecaca;
}

.form-card--neutral{
  background:linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  border-color:#e5e7eb;
}


/* =========================================
   Meta Box
   ========================================= */

.meta-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}

.meta-box{
  background:#fff;
  border:1px solid #dbeafe;
  border-radius:14px;
  padding:12px;
}

.meta-box__key{
  font-size:12px;
  color:#6b7280;
  margin-bottom:6px;
  font-weight:700;
}

.meta-box__value{
  font-size:15px;
  font-weight:800;
  color:#111827;
  line-height:1.5;
}

/* =========================================
   Form Field
   ========================================= */

.form-field{
  min-width:0;
}

.form-field__label{
  display:block;
  margin-bottom:6px;
  font-size:13px;
  font-weight:700;
  color:#4b5563;
}

.form-field__control{
  min-width:0;
}

.form-field__help{
  font-size:12px;
  color:#6b7280;
  margin-top:6px;
  line-height:1.7;
}

.form-field__error{
  font-size:12px;
  color:#dc2626;
  margin-top:6px;
  font-weight:700;
}

/* Inputs shared with form-field */
.form-input,
.form-select,
.form-textarea{
  width:100%;
  border:1px solid #d1d5db;
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
  color:#111827;
  font-size:14px;
}

.form-input[readonly],
.form-input[disabled],
.form-select[disabled],
.form-textarea[readonly]{
  background:#f3f4f6;
  color:#6b7280;
  cursor:not-allowed;
}

.form-textarea{
  resize:vertical;
  min-height:110px;
}

/* Layout helpers for forms */
.form-grid-1{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.form-grid-2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}

.form-grid-3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
}

.form-grid-4{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
}

@media (max-width: 950px){
  .meta-grid,
  .form-grid-4,
  .form-grid-3,
  .form-grid-2{
    grid-template-columns:1fr;
  }
}


/* =========================================
   Page Header Enhanced
   ========================================= */

.page-header--enhanced{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.page-header--enhanced h2{
  margin:0;
  font-size:26px;
  font-weight:900;
  color:#111827;
  line-height:1.3;
}

.page-header--enhanced .page-subtitle{
  margin-top:6px;
  font-size:13px;
  color:#6b7280;
  line-height:1.7;
}

.page-header--enhanced .page-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* =========================================
   Form Actions
   ========================================= */

.form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:18px;
}

.form-wrap{
  max-width: 1200px;
  margin: 0 auto;
}

.status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid transparent;
}

.status-planned{
  background:#fffbeb;
  color:#92400e;
  border-color:#fde68a;
}

.status-active{
  background:#ecfdf5;
  color:#065f46;
  border-color:#a7f3d0;
}

.status-closed{
  background:#f3f4f6;
  color:#374151;
  border-color:#e5e7eb;
}
.form-card{
  border-radius:22px;
  padding:18px;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}

.form-card--summary,
.form-card--basic,
.form-card--content,
.form-card--relation,
.form-card--finance,
.form-card--warning,
.form-card--danger,
.form-card--neutral{
  background-clip: padding-box;
}