:root{--primary-bg: #e0f7fa;--secondary-bg: #ffffff;--text-color: #004d40;--accent-color: #00796b;--button-hover: #009688;--font-ui: "Nunito Sans", sans-serif;--font-letter: "Lora", serif;--border-radius: 12px;--box-shadow: 0 6px 20px rgba(0, 77, 64, .15)}*{box-sizing:border-box}body{margin:0;font-family:var(--font-ui);color:var(--text-color);background:linear-gradient(135deg,#80deea,#00bcd4);display:flex;justify-content:center;align-items:center;min-height:100vh;overflow:hidden;position:relative}#root{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.app-container{width:100%;max-width:400px;height:100%;max-height:700px;background:var(--primary-bg);border-radius:var(--border-radius);box-shadow:var(--box-shadow);display:flex;flex-direction:column;overflow:hidden;position:relative}.screen{padding:20px;flex-grow:1;overflow-y:auto;animation:fadeIn .5s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.home-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:20px}.home-screen h1{font-family:var(--font-letter);font-size:2.5rem;margin:0;color:var(--accent-color)}.action-button{background:var(--accent-color);color:#fff;border:none;padding:15px 30px;border-radius:50px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:10px}.action-button:hover{background:var(--button-hover);transform:translateY(-3px);box-shadow:0 4px 10px #0003}.action-button:disabled{background:#9e9e9e;cursor:not-allowed;transform:none;box-shadow:none}.limits{margin-top:20px;font-size:.9rem;opacity:.8}.nav-button{background:none;border:2px solid var(--accent-color);color:var(--accent-color);padding:10px 20px}.write-screen,.read-screen,.cabinet-screen{display:flex;flex-direction:column;gap:15px}.header{display:flex;justify-content:space-between;align-items:center;width:100%}.back-button{background:none;border:none;font-size:1.5rem;color:var(--accent-color);cursor:pointer}.letter-paper{background:#fffaf0;padding:20px;border-radius:var(--border-radius);box-shadow:inset 0 0 10px #0000000d;flex-grow:1;display:flex;flex-direction:column}textarea.letter-content{width:100%;flex-grow:1;border:none;background:transparent;resize:none;font-family:var(--font-letter);font-size:1.1rem;line-height:1.6;color:var(--text-color)}textarea.letter-content:focus{outline:none}.image-preview{max-width:100%;max-height:150px;border-radius:var(--border-radius);object-fit:cover;margin-bottom:15px}.write-controls{display:flex;flex-direction:column;gap:10px;margin-top:15px}.control-group{display:flex;align-items:center;gap:10px}input[type=text]{padding:8px;border:1px solid #ccc;border-radius:4px;flex-grow:1}input[type=file]{display:none}.upload-label{cursor:pointer;color:var(--accent-color);font-size:1.5rem}.read-screen .letter-paper{font-family:var(--font-letter);font-size:1.1rem;line-height:1.6;white-space:pre-wrap}.metadata{font-size:.9rem;font-style:italic;text-align:right;margin-top:20px;opacity:.8}.read-actions{display:flex;justify-content:space-around;padding:10px 0}.read-actions button{background:none;border:none;font-size:1.5rem;color:var(--accent-color);cursor:pointer;transition:transform .2s ease}.read-actions button:hover{transform:scale(1.1)}.cabinet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:15px}.bottle-item{background:#ffffff80;padding:10px;border-radius:var(--border-radius);text-align:center;cursor:pointer;transition:all .3s ease}.bottle-item:hover{transform:translateY(-5px);box-shadow:var(--box-shadow)}.bottle-icon{font-size:3rem;color:var(--accent-color)}.bottle-item p{margin:5px 0 0;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}