:root{--infinite-light:#fff;--misty-sky:#f0f8ff;--pacific-ocean:#a2d2e6;--sea-mist:#bfdaf0;--soft-cloud:#e6f0f8;--calm-sand:#f5e6dc;--sea-shadow:#4a5568}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0;font-family:Inter,system-ui,-apple-system,sans-serif}body,html{width:100%;height:100%;color:var(--infinite-light);background-color:#0f172a;overflow:hidden}.view{opacity:0;width:100%;height:100%;transition:opacity .4s;display:none;position:absolute;top:0;left:0}.view.active{opacity:1;z-index:5;flex-direction:column;display:flex}#anchor-view{cursor:pointer;position:relative}#bg-image{object-fit:cover;z-index:1;opacity:0;width:100%;height:100%;transition:opacity .8s ease-in-out;position:fixed;top:0;left:0}#bg-image.loaded{opacity:1}.overlay{z-index:2;background:linear-gradient(#1e293b33 0%,#0f172a99 100%);width:100%;height:100%;transition:background .5s;position:fixed;top:0;left:0}.content-container{z-index:3;text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:40px;display:flex;position:relative}#anchor-message{text-shadow:0 4px 12px #55555580;letter-spacing:-.5px;opacity:0;margin-bottom:20px;font-size:2.2rem;font-weight:300;line-height:1.4;transition:all .6s cubic-bezier(.4,0,.2,1);transform:translateY(10px)}#anchor-message.show{opacity:1;transform:translateY(0)}.tap-hint{color:#ffffffb3;letter-spacing:2px;text-transform:uppercase;font-size:.85rem;font-weight:500;position:absolute;bottom:50px}.btn-settings-floating{z-index:10;-webkit-backdrop-filter:blur(10px);color:var(--infinite-light);cursor:pointer;background:#ffffff26;border:1px solid #ffffff4d;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;font-size:1.2rem;transition:all .3s;display:flex;position:absolute;top:25px;right:25px;box-shadow:0 4px 15px #5553}.btn-settings-floating:hover{background:#ffffff40;transform:scale(1.05)}#settings-view{background-color:var(--misty-sky);background-image:radial-gradient(circle at top left, var(--calm-sand) 0%, transparent 60%), radial-gradient(circle at top right, var(--infinite-light) 0%, transparent 60%), radial-gradient(circle at bottom right, var(--sea-mist) 0%, transparent 70%);z-index:10;padding:0;overflow-y:auto}.settings-content{max-width:680px;margin:0 auto;padding:60px 24px 100px}.header-settings{border-bottom:1px solid #ffffff4d;justify-content:space-between;align-items:center;margin-bottom:50px;padding-bottom:25px;display:flex}.header-settings h2{letter-spacing:-.5px;color:var(--sea-shadow);font-size:2.2rem;font-weight:300}.btn-close{color:#55555580;cursor:pointer;background:0 0;border:none;font-size:3rem;font-weight:200;line-height:1;transition:all .4s cubic-bezier(.4,0,.2,1)}.btn-close:hover{color:var(--sea-shadow);transform:rotate(90deg)}.section{background:#ffffff24;border-radius:32px;margin-bottom:40px;padding:40px;transition:all .4s;position:relative;overflow:hidden;box-shadow:0 4px 30px #00000008}.section:hover{transform:translateY(-2px);box-shadow:0 8px 40px #0000000d}h3{color:var(--sea-shadow);letter-spacing:.2px;margin-bottom:12px;font-size:1.25rem;font-weight:500}p.desc{color:#555c;margin-bottom:30px;font-size:1rem;font-weight:300;line-height:1.6}.input-row{gap:16px;margin-bottom:30px;display:flex}input[type=text],input[type=url]{color:var(--sea-shadow);background:#fff9;border:1px solid #ffffffb3;border-radius:20px;flex:1;padding:18px 24px;font-size:1.05rem;font-weight:400;transition:all .3s;box-shadow:inset 0 2px 5px #00000005}input[type=text]:focus,input[type=url]:focus{background:#ffffffe6;border-color:#fff;outline:none;box-shadow:0 0 0 4px #fff6}input::placeholder{color:#5556;font-weight:300}.file-upload-wrapper{flex:1;position:relative}.file-upload-label{color:#4a5568b3;cursor:pointer;background:#ffffff80;border:2px dashed #fffc;border-radius:20px;justify-content:center;align-items:center;gap:12px;padding:20px;font-size:1rem;font-weight:400;transition:all .3s;display:flex}.file-upload-label:hover{color:var(--sea-shadow);background:#ffffffb3;border-color:#fff}input[type=file]{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0}.btn-add{color:var(--sea-shadow);cursor:pointer;-webkit-backdrop-filter:blur(10px);background:linear-gradient(135deg,#ffffffe6 0%,#fff9 100%);border:1px solid #fffc;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:60px;height:60px;padding:0;transition:all .4s cubic-bezier(.34,1.56,.64,1);display:flex;box-shadow:0 4px 15px #0000000a,inset 0 2px 4px #ffffff80}.btn-add:hover{border-color:var(--pacific-ocean);color:#4a94b5;background:linear-gradient(135deg,#fff 0%,#ffffffe6 100%);transform:translateY(-2px);box-shadow:0 8px 25px #a2d2e666,inset 0 2px 4px #fffc}.btn-add svg{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}.btn-add:hover svg{transform:scale(1.1)rotate(90deg)}.btn-add:active{transform:scale(.95);box-shadow:0 2px 8px #00000008}ul{list-style:none}li{color:var(--sea-shadow);background:#fff9;border:1px solid #ffffffb3;border-radius:20px;justify-content:space-between;align-items:center;margin-bottom:16px;padding:20px 24px;font-size:1.05rem;font-weight:400;transition:all .3s;display:flex;box-shadow:0 4px 15px #00000005}li:hover{background:#fffc;border-color:#fff;transform:translate(4px);box-shadow:0 6px 20px #0000000a}.text-preview{text-overflow:ellipsis;white-space:nowrap;max-width:85%;overflow:hidden}img.img-preview{object-fit:cover;border-radius:12px;width:50px;height:50px;margin-right:20px;box-shadow:0 2px 6px #5555551a}.li-content{align-items:center;width:85%;display:flex;overflow:hidden}.btn-delete{color:var(--sea-shadow);opacity:.7;cursor:pointer;-webkit-backdrop-filter:blur(4px);background:#fff6;border:1px solid #ffffff80;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;font-size:1.1rem;font-weight:400;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 2px 8px #00000005}.btn-delete:hover{color:#e56b6b;opacity:1;background:#ffffffe6;border-color:#fff;transform:scale(1.1)rotate(90deg);box-shadow:0 4px 12px #e56b6b26}.controls-row{justify-content:space-between;align-items:center;display:flex}.toggle-btn{color:var(--sea-shadow);cursor:pointer;-webkit-backdrop-filter:blur(10px);background:linear-gradient(135deg,#ffffffe6 0%,#fff9 100%);border:1px solid #fffc;border-radius:30px;padding:14px 28px;font-size:1rem;font-weight:500;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 15px #0000000a,inset 0 2px 4px #ffffff80}.toggle-btn:hover{background:linear-gradient(135deg,#fff 0%,#fffc 100%);border-color:#fff;transform:translateY(-2px);box-shadow:0 8px 25px #0000000f,inset 0 2px 4px #fffc}#loading-overlay{z-index:50;color:#555c;-webkit-backdrop-filter:blur(20px);background:#ffffff4d;justify-content:center;align-items:center;width:100%;height:100%;display:none;position:fixed;top:0;left:0}#loading-overlay.active{flex-direction:column;gap:20px;display:flex}.spinner{border:3px solid var(--soft-cloud);border-top-color:var(--pacific-ocean);border-radius:50%;width:50px;height:50px;animation:1s cubic-bezier(.4,0,.2,1) infinite spin}#loading-text{color:var(--sea-shadow);letter-spacing:1px;font-weight:400}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=640px){.content-container{padding:20px 10px}#anchor-message{padding:0 10px;font-size:1.7rem}.tap-hint{text-align:center;letter-spacing:1px;width:100%;padding:0 20px;font-size:.7rem;bottom:40px}.btn-settings-floating{width:44px;height:44px;font-size:1.1rem;top:20px;right:20px}.settings-content{box-sizing:border-box;width:100%;padding:20px 15px 80px}.header-settings{margin-bottom:30px;padding-bottom:20px}.header-settings h2{font-size:1.6rem}.btn-close{font-size:2.2rem}.section{box-sizing:border-box;border-radius:20px;width:100%;margin-bottom:24px;padding:24px 16px}h3{font-size:1.1rem}p.desc{margin-bottom:20px;font-size:.9rem}.input-row{box-sizing:border-box;flex-direction:row;align-items:center;gap:12px;width:100%;margin-bottom:20px}input[type=text],input[type=url]{box-sizing:border-box;width:100%;padding:16px 20px;font-size:1rem}.file-upload-wrapper,.file-upload-label{box-sizing:border-box;width:100%}.btn-add{border-radius:50%;flex-shrink:0;width:52px;height:52px;padding:0}li{box-sizing:border-box;border-radius:16px;flex-direction:row;width:100%;margin-bottom:12px;padding:16px;font-size:.95rem}img.img-preview{border-radius:8px;width:44px;height:44px;margin-right:12px}.li-content{width:calc(100% - 44px)}.controls-row{box-sizing:border-box;flex-direction:column;align-items:stretch;gap:12px;width:100%}.toggle-btn{text-align:center;box-sizing:border-box;width:100%;padding:14px 20px}}
