diff --git a/resources/styles.css b/resources/styles.css
index 78f6458..60c661f 100644
--- a/resources/styles.css
+++ b/resources/styles.css
@@ -1,20 +1,176 @@
+ * {
+ margin:0;
+ padding:0;
+ box-sizing:border-box;
+ }
body {
- background-color: white;
- }
-
- #neutralinoapp {
- text-align: center;
- -webkit-user-select: none;
- user-select: none;
- cursor: default;
- }
-
- #neutralinoapp h1{
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
- font-size: 20px;
- }
-
- #neutralinoapp > div {
- font-size: 16px;
- font-weight: normal;
+ font-family:Arial, sans-serif;
+ background-color:#fff1e5;
+ min-height:100vh;
+ }
+ .app-wrapper {
+ display:flex;
+ min-height:100vh;
+ }
+ h1 {
+ margin-bottom:20px;
+ font-size:1.5rem;
+ color:#807973;
+ text-align:center;
+ }
+ #docStatus {
+ font-size:13px;
+ color:#555;
+ margin:10px 0 8px 0;
+ min-height:18px;
+ font-style:italic;
+ text-align:center;
+ }
+ textarea {
+ width:100%;
+ height:600px;
+ padding:12px;
+ font-size:16px;
+ resize:vertical;
+ box-sizing:border-box;
+ border:1px solid #ccc;
+ border-radius:4px;
+ font-family:Arial, sans-serif;
+ background-color:#fff1e5;
+ }
+ textarea:focus {
+ outline:none;
+ border:1px solid #aaa;
+ box-shadow:0 0 4px rgba(0,0,0,0.05);
+ }
+ .link-btn {
+ background:none;
+ border:none;
+ padding:0;
+ margin-top:10px;
+ margin-right:14px;
+ font-size:14px;
+ color:#0f8e99;
+ text-decoration:underline;
+ cursor:pointer;
+ font-family:inherit;
+ }
+ .link-btn:hover {
+ color:#0a6b75;
+ }
+ #countContainer {
+ margin-top:10px;
+ font-size:0.8rem;
+ color:#555;
+ display:flex;
+ justify-content:center;
+ gap:10px;
+ }
+ #linkBtnContainer {
+ text-align:center;
+ }
+ .saved-column {
+ background:#fde8d0;
+ width:260px;
+ flex-shrink:0;
+ box-shadow:2px 0 8px rgba(0,0,0,0.07);
+ transition:width 0.3s ease;
+ position:relative;
+ display:flex;
+ flex-direction:column;
+ }
+ .saved-column.collapsed {
+ width:44px;
+ }
+ .saved-column.collapsed .docs-content {
+ display:none;
+ }
+ .column-header {
+ padding:14px 12px;
+ border-bottom:1px solid #e0c8b0;
+ display:flex;
+ justify-content:space-between;
+ align-items:center;
+ background:#fde8d0;
+ }
+ .saved-column.collapsed .column-header {
+ justify-content:center;
+ padding:14px 5px;
+ }
+ .column-header h2 {
+ font-size:0.95rem;
+ color:#807973;
+ font-weight:600;
+ margin:0;
+ }
+ .saved-column.collapsed .column-header h2 {
+ display:none;
+ }
+ .toggle-btn {
+ background:none;
+ color:#0f8e99;
+ border:1px solid #0f8e99;
+ width:24px;
+ height:24px;
+ border-radius:3px;
+ cursor:pointer;
+ font-size:16px;
+ font-weight:bold;
+ display:flex;
+ align-items:center;
+ justify-content:center;
+ transition:background 0.2s, color 0.2s;
+ flex-shrink:0;
+ line-height:1;
+ }
+ .toggle-btn:hover {
+ background:#0f8e99;
+ color:#fff1e5;
+ }
+ .docs-content {
+ flex:1;
+ overflow-y:auto;
+ padding:12px;
+ }
+ .doc-single-line {
+ margin-bottom:10px;
+ padding:8px;
+ background:#fff1e5;
+ border-radius:4px;
+ border:1px solid #e0c8b0;
+ }
+ .doc-single-line.active-doc {
+ background:#e8f0fe;
+ border-color:#007bff;
+ }
+ .doc-line1 {
+ font-size:0.72rem;
+ color:#444;
+ white-space:nowrap;
+ overflow:hidden;
+ text-overflow:ellipsis;
+ margin-bottom:5px;
+ }
+ .doc-line2 {
+ display:flex;
+ gap:10px;
+ }
+ .small-link-btn {
+ background:none;
+ border:none;
+ padding:0;
+ font-size:0.72rem;
+ color:#0f8e99;
+ text-decoration:underline;
+ cursor:pointer;
+ font-family:inherit;
+ }
+ .small-link-btn:hover {
+ color:#0a6b75;
+ }
+ .content-column {
+ flex:1;
+ padding:40px;
+ max-width:900px;
+ margin:0 auto;
}