:root {
  --green: #2f6b3d;
  --green-dark: #214d2c;
  --light-green: #d9ead3;
  --brown: #7b5a3c;
  --cream: #f8f5ef;
  --text: #243126;
}
body { font-family: Arial, sans-serif; margin:0; background:linear-gradient(160deg, #f3f8f1, #fcfaf5); color:var(--text); }
.container { max-width: 1100px; margin: 30px auto; background:#fff; border-radius: 18px; box-shadow:0 18px 50px rgba(26,65,35,.14); padding: 30px; border:1px solid #e1ebdc; animation: fadeIn .5s ease; }
.header { display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.subtitle { opacity: .82; }
.logo { width:74px; height:74px; object-fit:contain; border-radius:10px; background:#fff; border:1px solid #ddd; }
h1,h2,h3 { color: var(--green); margin: 0 0 8px 0; }
.form-card{ background:linear-gradient(180deg,#ffffff,#fbfdf9); border:1px solid #e3eedf; border-radius:14px; padding:16px; }
.grid { display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
label { font-weight:600; display:block; margin-bottom:6px; }
.field-wrap { position:relative; }
.field-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:18px; height:18px; fill:#5f7f62; pointer-events:none; }
.field-wrap-area .field-icon{ top:18px; transform:none; }
input, textarea, button { width:100%; padding:12px 12px 12px 38px; border-radius:10px; border:1px solid #c7d6c2; box-sizing:border-box; transition:all .2s ease; }
textarea{ min-height:130px; }
input:focus, textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(47,107,61,.15); outline:none; }
button { background:linear-gradient(135deg,var(--green),var(--green-dark)); color:#fff; font-weight:700; cursor:pointer; border:none; padding:12px; box-shadow:0 10px 20px rgba(47,107,61,.25); }
button:hover{ transform:translateY(-1px); }
button:active{ transform:translateY(0); }
button.secondary{ background:var(--brown); }
.section{ border-top:2px solid var(--light-green); padding-top:16px; margin-top:16px; }
.small{ font-size:12px; opacity:.85; }
.link-card{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--green-dark); font-weight:600; padding:14px; background:#f2f8f0; border-radius:10px; margin-bottom:10px; border:1px solid #d5e7cf; transition:all .2s ease; }
.link-card svg{ width:20px; height:20px; fill:var(--green); }
.link-card:hover{ transform:translateY(-1px); box-shadow:0 8px 16px rgba(47,107,61,.12); }
code, pre { background:#f7f7f7; padding: 10px; border-radius:8px; display:block; overflow:auto; }
.notice { margin-top: 14px; font-weight: 700; color:var(--green-dark); }
.after-submit{ margin-top: 16px; padding:18px; border-radius:12px; border:1px solid #d9ead3; background:#fcfffb; }
.tabs { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.tab-btn { width:auto; background:#e7efe4; color:var(--green); border:1px solid #c5d7be; }
.tab-btn.active { background:var(--green); color:white; }
.tab-panel { display:none; border-top:2px solid var(--light-green); padding-top:16px; }
.tab-panel.active { display:block; }
.table { width:100%; border-collapse: collapse; font-size:13px; }
.table th, .table td { border:1px solid #d8e3d3; padding:8px; vertical-align:top; }
.table th { background:#eef5ea; text-align:left; }
.fade-out { animation: fadeOut .3s ease forwards; }
.fade-in-up { animation: fadeInUp .5s ease forwards; }
@keyframes fadeIn { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }
@keyframes fadeOut { from{opacity:1; transform:scale(1)} to{opacity:0; transform:scale(.98)} }
@keyframes fadeInUp { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
@media (max-width:700px){ .grid { grid-template-columns:1fr; } }

.link-card{ align-items:flex-start; justify-content:space-between; }
.link-card-main{ min-width: 0; }
.link-card-edit{ min-width:260px; display:flex; flex-direction:column; gap:8px; }
.link-card-input{ padding:10px 12px; }
.link-card-save{ width:auto; padding:10px 14px; }