:root{
    --c1: #89A8B2;
    --c2: #B3C8CF;
    --c3: #E5E1DA;
    --c4: #F1F0E8;
	--c5: #9db7c0;
    --accent: #446770;
    --muted: #6b6b6b;
}
*{box-sizing:border-box}
body{
    margin:0;
    font-family: "Helvetica Neue", Arial, sans-serif;
    background: linear-gradient(180deg, var(--c4) 0%, #ffffff 100%);
    color:#123;
    padding:24px;
    -webkit-font-smoothing:antialiased;
}
.container{
    max-width:1100px;
    margin: 20px auto;
    background: linear-gradient(180deg, var(--c3), #fff);
    border-radius:14px;
    box-shadow: 0 8px 30px rgba(10,20,30,0.08);
    overflow:hidden;
    border: 1px solid rgba(0,0,0,0.06);
}

/* Header */
.header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:22px 28px;
    background: linear-gradient(90deg, var(--c1), var(--c2));
    color: #fff;
}
.header-left{
    display:flex; align-items:center; gap:14px;
}
.logo{
    width:72px; height:72px; border-radius:8px;
    background: rgba(255,255,255,0.12);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:18px;
    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.08);
}
.title{
    font-size:20px; font-weight:700; letter-spacing:0.4px;
}
.subtitle{ font-size:13px; opacity:0.95; }

/* Actions (login/edit/print) */
.actions{
    display:flex; align-items:center; gap:10px;
}
.btn{
    background:transparent; border:1px solid rgba(255,255,255,0.18);
    color: #fff; padding:8px 12px; border-radius:8px; cursor:pointer;
    display:inline-flex; align-items:center; gap:8px; text-decoration:none;
}
.button{    background: var(--c1); border:1px solid rgba(255,255,255,0.18); }


.btn.secondary{ background:rgba(255,255,255,0.06); border:none; color:#fff; }
.btn.logout{ background:rgba(255,255,255,0.12); }
.small{ font-size:13px; }

/* Print button pinned top-left */
.print-pin{
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 9999;
}
.print-btn{
    background: var(--c1);
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 6px 18px rgba(10,20,30,0.15);
    color: #fff;
    display:flex; align-items:center; gap:8px;
    cursor:pointer;
    border:none;
}

/* Main content */
.content{ padding:28px; display:grid; grid-template-columns: 1fr 330px; gap:28px; }
.col-left{ background:transparent; }
.col-right{
    background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.85));
    padding:18px; border-radius:10px; border:1px solid rgba(0,0,0,0.04);
}

/* Section styles */
.section{ 
margin-bottom:18px; 
padding-bottom:10px; 
border-bottom:1px dashed rgba(0,0,0,0.2); 
}

.section h3{ 
margin:0 0 8px 0; 
font-size:16px; 
color:var(--accent); 
display:flex; align-items:center; gap:10px; 
}

.section_mini{ 
padding-bottom:10px; 
}


.section_mini h3{ 
margin:0 0 8px 0; 
font-size:18px; 
color:var(--accent); 
display:flex; align-items:center; gap:10px; 
}

.itemtext{width:90%; margin:0; padding:1px!important;  }


textarea.input-area{min-height:100px;resize:vertical;width:100%;field-sizing: content;background:transparent;padding:3px; border:1px solid rgba(0,0,0,0.1)}

.input-text {width:70%;background:transparent;padding:3px; border:1px solid rgba(0,0,0,0.1);margin-left:3px;margin-bottom:2px;}


.text-block{ line-height:1.5; font-size:14px; color:#233;margin:8px  }

.list{ padding-left:18px; margin:8px 0; }

.muted{ color:var(--muted); font-style:italic; }

.status { font-size:17px;color:#fff;background:green;margin-left:8px; top:100px; left:49%; padding:10px; border:1px solid rgba(0,0,0,0.5);    position:fixed;}

.btn-add {background:#2d9f3f;color:white;padding:4px;}
.btn-del {background:#d9534f;color:white;padding:4px;}

.box2 {
  display: inline-block;
  margin-left: 3px;
}


/* Edit form */
.form-control{ width:100%; padding:10px; border-radius:8px; border:1px solid rgba(0,0,0,0.06); resize:vertical; font-size:14px; }
.inline-add{ display:flex; gap:8px; margin-top:8px; }
.small-btn{ padding:6px 8px; border-radius:8px; border: none; cursor:pointer; background:var(--c2); color:#123; }
.remove-btn{ background:#ff6b6b; color:#fff; border:none; padding:6px 8px; border-radius:8px; cursor:pointer; }

/* Footer */
.footer{ padding:18px 28px; background: linear-gradient(90deg, rgba(0,0,0,0.02), transparent); font-size:13px; color:var(--muted); display:flex; justify-content:space-between; align-items:center; }

/* Small helpers */
.top-links{ display:flex; gap:8px; align-items:center; }
.centered{ text-align:center; padding:28px; }

.mini-header { font-weight: bold; margin-bottom: 3px; font-size:15px;  margin-top: 3px; padding:0px;padding-left:7px; color:var(--accent);}
.item-text{ margin-bottom: 3px; font-size:14px;margin-bottom: 10px; color:var(--accent);  padding:0px;padding-left:7px;  }
.text{ margin-bottom: 3px; font-size:15px;color:var(--accent);padding-left:7px;  }

/* Print styles */
@media print{
    body{ background: #fff; padding:0; }
    .header, .actions, .print-pin, .btn, .no-print { display:none !important; }
    .container{ box-shadow:none; border:none; border-radius:0; margin:0; }
    .content{ grid-template-columns: 1fr; gap:12px; padding:0; }
    .col-right{ box-shadow:none; border:none; background:transparent; padding:0; }
}