/* Study room page styles — single owner. * Loaded after desktop-shell.css. Safe balanced extract. */ #desktop-study-room .classroom-layout.room-external .classroom-seats { position:absolute !important; inset:18px !important; z-index:20 !important; display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; grid-template-rows:minmax(0,1fr) !important; gap:0 !important; min-height:0 !important; padding:0 !important; } #desktop-study-room .classroom-layout.room-external .urban-room { display:flex !important; min-width:0 !important; min-height:0 !important; padding:22px !important; } #desktop-study-room .classroom-layout.room-external .urban-quiet { border-right:8px solid #c79662 !important; border-bottom:0 !important; } #desktop-study-room .classroom-layout.room-external .urban-seat-grid { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; grid-template-rows:repeat(6,minmax(0,1fr)) !important; flex:1 1 auto !important; min-height:0 !important; gap:15px 18px !important; padding:20px 10px 4px !important; } #desktop-study-room .classroom-layout.room-external .urban-room .classroom-booth { width:auto !important; height:auto !important; min-height:0 !important; transform:none !important; } #desktop-study-room .classroom-layout.room-external .classroom-podium, #desktop-study-room .classroom-layout.room-external .classroom-legend, #desktop-study-room .classroom-layout.room-external .classroom-plant, #desktop-study-room .classroom-layout.room-external .classroom-windows, #desktop-study-room .classroom-layout.room-external .classroom-ac { display:none !important; } @media (max-width:780px) { #desktop-study-room .classroom-layout.room-external { min-height:760px !important; } #desktop-study-room .classroom-layout.room-external .classroom-seats { inset:16px !important; grid-template-columns:1fr !important; grid-template-rows:minmax(0,1fr) minmax(0,1fr) !important; } #desktop-study-room .classroom-layout.room-external .urban-quiet { border-right:0 !important; border-bottom:8px solid #c79662 !important; } #desktop-study-room .classroom-layout.room-external .urban-room { padding:16px !important; } #desktop-study-room .classroom-layout.room-external .urban-seat-grid { gap:10px 12px !important; padding:12px 4px 2px !important; } } #desktop-study-room { position:fixed; inset:0 var(--desktop-right-width) 0 var(--desktop-left-width); z-index:82; overflow-y:auto; box-sizing:border-box; background:#09090b; color:#ecebf0; } body.desktop-nav-collapsed #desktop-study-room { left:0; } body.context-collapsed #desktop-study-room { right:0; } #desktop-study-room * { box-sizing:border-box; } #desktop-study-room button,#desktop-study-room input,#desktop-study-room select { font:inherit; } #desktop-study-room button { cursor:pointer; } #desktop-study-room .classroom-panel { overflow:hidden; border-color:#31413f; background:#101716; } #desktop-study-room .classroom-head { position:relative; z-index:2; } #desktop-study-room .classroom-location-controls { position:absolute; top:0; right:0; display:flex; align-items:center; gap:7px; } #desktop-study-room .classroom-head h2 { color:#f2f1e9; font-size:19px; } #desktop-study-room .classroom-note { color:#94a39b; } #desktop-study-room .classroom-stats { border-left-color:#38504b; } #desktop-study-room .classroom-layout { isolation:isolate; grid-template-columns:minmax(0,1fr) 126px; min-height:390px; overflow:hidden; border-color:#334542; border-radius:5px; background:#17201e; box-shadow:inset 0 0 0 10px #111714,inset 0 0 0 11px #415550; } #desktop-study-room .classroom-layout::before { content:''; position:absolute; z-index:-1; inset:0; opacity:.52; background-image:linear-gradient(90deg,transparent 49.4%,rgba(220,232,223,.06) 50%,transparent 50.6%),linear-gradient(0deg,transparent 49.4%,rgba(220,232,223,.06) 50%,transparent 50.6%); background-size:36px 36px; } #desktop-study-room .classroom-layout::after { content:'自习安静区'; position:absolute; right:22px; bottom:18px; color:rgba(184,214,204,.2); font:600 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.18em; writing-mode:vertical-rl; } #desktop-study-room .classroom-board { position:relative; width:min(250px,50%); min-height:36px; padding:10px 14px; border:4px solid #4b3426; border-radius:2px; background:#17322b; color:#b7ddcb; box-shadow:0 3px 0 #1e1510,0 9px 14px rgba(0,0,0,.25),inset 0 0 20px rgba(0,0,0,.24); font-family:Georgia,'Times New Roman',serif; letter-spacing:.12em; } #desktop-study-room .classroom-board::after { content:'今日好好学习'; position:absolute; left:14px; top:10px; color:rgba(228,247,235,.17); font-size:9px; letter-spacing:.18em; } #desktop-study-room .classroom-seats { align-content:center; gap:22px 18px; padding:26px 14px 18px; } #desktop-study-room .classroom-seat { z-index:1; min-height:51px; aspect-ratio:1.45; justify-content:flex-start; gap:1px; padding:8px 5px 11px; border:1px solid #835a38; border-radius:3px 3px 5px 5px; background:#805636; box-shadow:inset 0 3px 0 rgba(255,222,174,.18),inset 0 -5px 0 rgba(38,20,11,.3),0 6px 0 #392317,0 9px 8px rgba(0,0,0,.28); color:#fff3dd; transform:perspective(120px) rotateX(2deg); } #desktop-study-room .classroom-seat::before { content:''; position:absolute; z-index:-1; right:14%; bottom:-17px; width:72%; height:13px; border:1px solid #232526; border-radius:3px 3px 7px 7px; background:#333a3b; box-shadow:0 7px 0 -3px #141819; } #desktop-study-room .classroom-seat::after { content:''; position:absolute; top:9px; right:9px; width:13px; height:8px; border-radius:1px; background:rgba(255,235,189,.33); box-shadow:inset 0 -1px 0 rgba(69,35,12,.35); } #desktop-study-room .classroom-seat:hover { border-color:#e3b16f; background:#95623d; } #desktop-study-room .classroom-seat > span { width:20px; height:20px; margin-top:-15px; border:2px solid #d9e9e4; background:#3ba99b; color:#06221e; box-shadow:0 2px 5px rgba(0,0,0,.28); } #desktop-study-room .classroom-seat > span:empty { display:none; } #desktop-study-room .classroom-seat small { position:relative; z-index:1; margin-top:2px; color:rgba(255,237,209,.62); font-size:8px; text-shadow:0 1px 1px rgba(0,0,0,.38); } #desktop-study-room .classroom-seat b { color:rgba(255,235,204,.5); font-size:7px; } #desktop-study-room .classroom-seat.is-mine { border-color:#6ee4d1; background:#5e896e; box-shadow:inset 0 3px 0 rgba(236,255,235,.26),inset 0 -5px 0 rgba(18,56,41,.38),0 6px 0 #234536,0 9px 13px rgba(35,181,157,.25); } #desktop-study-room .classroom-seat.is-mine::after { background:#f3d683; } #desktop-study-room .classroom-seat.is-mine small { color:#d9fff4; } #desktop-study-room .classroom-legend { align-self:end; gap:11px; padding:14px 0 14px 16px; border-left-color:#38504b; background:rgba(8,13,12,.24); } #desktop-study-room .classroom-legend i { border-radius:50%; } #desktop-study-room .classroom-legend i:not(.is-mine):not(.is-occupied) { border-color:#a77248; background:#805636; } @media (max-width:780px) { #desktop-study-room .classroom-layout { min-height:0; grid-template-columns:1fr; } #desktop-study-room .classroom-seats { gap:18px 8px; padding:24px 8px 20px; } #desktop-study-room .classroom-seat { min-height:39px; padding-top:6px; } #desktop-study-room .classroom-seat::before { bottom:-13px; height:9px; } #desktop-study-room .classroom-legend { background:transparent; border-left:0; border-top-color:#38504b; } } #desktop-study-room .classroom-layout { min-height:510px; grid-template-columns:minmax(0,1fr) 142px; padding-bottom:0; } #desktop-study-room .classroom-board { align-self:start; margin-top:4px; } #desktop-study-room .classroom-window { position:absolute; top:24px; right:28px; display:grid; grid-template-columns:repeat(2,34px); gap:4px; padding:5px; border:4px solid #d8d2bf; background:#567f89; box-shadow:0 3px 0 rgba(0,0,0,.24); } #desktop-study-room .classroom-window::before { content:''; position:absolute; inset:5px 0 auto; height:2px; background:#d8d2bf; } #desktop-study-room .classroom-window i { display:block; width:34px; height:37px; background:#8fb6bd; box-shadow:inset 0 16px 0 rgba(233,245,230,.18); } #desktop-study-room .classroom-seats { align-content:start; grid-template-columns:repeat(6,minmax(34px,1fr)); gap:42px 22px; padding:52px 28px 90px; } #desktop-study-room .classroom-seat { justify-self:center; width:78%; min-width:34px; min-height:36px; aspect-ratio:1.55; padding:6px 4px 8px; box-shadow:inset 0 2px 0 rgba(255,222,174,.18),inset 0 -4px 0 rgba(38,20,11,.3),0 5px 0 #392317,0 8px 7px rgba(0,0,0,.25); } #desktop-study-room .classroom-seat::before { bottom:-15px; height:10px; } #desktop-study-room .classroom-seat::after { top:6px; right:6px; width:10px; height:6px; } #desktop-study-room .classroom-seat > span { width:18px; height:18px; margin-top:-13px; font-size:9px; } #desktop-study-room .classroom-seat small { margin-top:0; font-size:7px; } #desktop-study-room .classroom-cafe { position:absolute; z-index:3; left:30px; bottom:26px; display:grid; width:154px; min-height:50px; grid-template-columns:1fr auto; align-items:end; padding:9px 11px; border:2px solid #533929; border-radius:3px; background:#765342; box-shadow:inset 0 2px 0 rgba(255,221,190,.18),0 5px 0 #302018,0 8px 12px rgba(0,0,0,.22); color:#f4dfbf; } #desktop-study-room .classroom-cafe::before { content:''; position:absolute; top:-10px; left:14px; width:22px; height:13px; border-radius:3px 3px 7px 7px; background:#e9d7b7; box-shadow:31px 2px 0 -2px #d6b985,62px 0 0 -1px #e9d7b7; } #desktop-study-room .classroom-cafe span { color:#ebc98c; font:700 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; } #desktop-study-room .classroom-cafe b { color:#d7bba0; font-size:8px; font-weight:500; } #desktop-study-room .classroom-cafe i { position:absolute; right:15px; top:-23px; width:9px; height:20px; border-left:2px solid rgba(232,242,238,.28); border-radius:50%; transform:rotate(-12deg); } #desktop-study-room .classroom-plant { position:absolute; z-index:2; width:28px; height:38px; border-radius:5px 5px 10px 10px; background:#9a6c4a; box-shadow:inset 0 3px rgba(255,230,196,.16),0 4px 0 #4a3328; } #desktop-study-room .classroom-plant::before,#desktop-study-room .classroom-plant::after,#desktop-study-room .classroom-plant i { content:''; position:absolute; bottom:26px; width:15px; height:27px; border-radius:100% 0 100% 0; background:#4c8c62; transform:rotate(22deg); box-shadow:9px 8px 0 #3f7954; } #desktop-study-room .classroom-plant::after { left:9px; transform:rotate(-26deg); background:#64a86d; box-shadow:-8px 9px 0 #427b55; } #desktop-study-room .classroom-plant i { left:4px; bottom:32px; width:12px; height:21px; background:#79b979; box-shadow:0 0; } #desktop-study-room .classroom-plant-one { right:30px; bottom:70px; } #desktop-study-room .classroom-plant-two { left:204px; bottom:24px; transform:scale(.74); transform-origin:bottom left; } #desktop-study-room .classroom-legend { align-self:start; margin-top:118px; } #desktop-study-room .classroom-ranking { margin:0 0 18px; padding:18px 22px; border:1px solid #293532; border-radius:6px; background:#101514; } #desktop-study-room .classroom-ranking-head { display:flex; align-items:start; justify-content:space-between; gap:18px; } #desktop-study-room .classroom-ranking h2 { margin:0; color:#edf2ef; font-size:16px; } #desktop-study-room .classroom-ranking-head > b { padding:5px 8px; border:1px solid #39514c; border-radius:3px; color:#83c9bd; font-size:9px; } #desktop-study-room .classroom-ranking-empty { display:flex; align-items:center; justify-content:center; gap:8px; min-height:46px; margin-top:13px; border-top:1px solid #28322f; color:#74827d; font-size:10px; } #desktop-study-room .classroom-ranking-empty i { color:#4ea99a; font-size:17px; } @media (max-width:780px) { #desktop-study-room .classroom-layout { min-height:460px; } #desktop-study-room .classroom-window { display:none; } #desktop-study-room .classroom-seats { gap:34px 7px; padding:46px 10px 105px; } #desktop-study-room .classroom-seat { width:88%; min-height:29px; } #desktop-study-room .classroom-seat small { font-size:6px; } #desktop-study-room .classroom-cafe { left:14px; bottom:22px; width:132px; min-height:43px; } #desktop-study-room .classroom-plant-one { right:17px; bottom:50px; transform:scale(.75); } #desktop-study-room .classroom-plant-two { left:158px; bottom:16px; transform:scale(.55); } #desktop-study-room .classroom-legend { margin-top:0; } } #desktop-study-room .classroom-seats { grid-template-columns:repeat(3,minmax(72px,1fr)); gap:38px 56px; padding:50px 46px 94px; } #desktop-study-room .classroom-desk { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; min-width:0; min-height:30px; padding:4px 5px 7px; border:1px solid #8c623e; border-radius:3px 3px 5px 5px; background:#815737; box-shadow:inset 0 2px 0 rgba(255,225,184,.2),inset 0 -4px 0 rgba(43,22,11,.3),0 5px 0 #392317,0 8px 8px rgba(0,0,0,.23); } #desktop-study-room .classroom-desk::after { content:''; position:absolute; z-index:0; top:5px; left:50%; width:1px; height:calc(100% - 12px); background:rgba(58,31,14,.5); } #desktop-study-room .classroom-seat { z-index:1; width:100%; min-width:0; min-height:20px; aspect-ratio:auto; justify-self:stretch; justify-content:flex-start; padding:2px 3px 4px; border:0; border-radius:2px; background:transparent; box-shadow:none; transform:none; } #desktop-study-room .classroom-seat::before { z-index:-1; right:19%; bottom:-13px; width:62%; height:8px; border:0; border-radius:2px 2px 5px 5px; background:#313a3b; box-shadow:0 5px 0 -3px #121617; } #desktop-study-room .classroom-seat::after { top:2px; right:3px; width:7px; height:4px; opacity:.78; } #desktop-study-room .classroom-seat:hover { border:0; background:rgba(255,235,197,.12); transform:none; } #desktop-study-room .classroom-seat > span { width:15px; height:15px; margin-top:-11px; border-width:1px; font-size:7px; } #desktop-study-room .classroom-seat small { max-width:38px; margin-top:0; font-size:6px; } #desktop-study-room .classroom-seat b { top:1px; left:3px; font-size:6px; } #desktop-study-room .classroom-seat.is-mine { border:1px solid #75e4d2; background:rgba(54,157,132,.56); box-shadow:0 0 0 1px rgba(117,228,210,.12); } #desktop-study-room .classroom-seat.is-mine::before { background:#286153; } @media (max-width:780px) { #desktop-study-room .classroom-seats { grid-template-columns:repeat(3,minmax(55px,1fr)); gap:30px 18px; padding:45px 20px 105px; } #desktop-study-room .classroom-desk { min-height:25px; padding:3px 4px 6px; } #desktop-study-room .classroom-seat { min-height:17px; padding:1px 2px 3px; } #desktop-study-room .classroom-seat::before { bottom:-11px; height:7px; } #desktop-study-room .classroom-seat small { font-size:5px; } } #desktop-study-room .classroom-windows { position:absolute; z-index:2; top:22px; right:26px; display:grid; grid-template-columns:repeat(3,31px); grid-template-rows:repeat(2,32px); gap:3px; padding:5px; border:4px solid #d5d0c0; background:#496d75; box-shadow:0 3px 0 rgba(0,0,0,.22); } #desktop-study-room .classroom-windows::before { content:''; position:absolute; inset:0; border:1px solid rgba(255,255,255,.35); pointer-events:none; } #desktop-study-room .classroom-windows i { display:block; background:#91b9bd; box-shadow:inset 0 14px 0 rgba(228,245,226,.23); } #desktop-study-room .classroom-ac { position:absolute; z-index:3; top:124px; right:28px; display:grid; width:110px; min-height:31px; grid-template-columns:1fr auto; align-items:center; gap:4px; padding:5px 7px; border:2px solid #c8d3d0; border-radius:3px; background:#e7eeeb; box-shadow:0 3px 0 #70847e,0 6px 9px rgba(0,0,0,.2); color:#34514c; } #desktop-study-room .classroom-layout.room-school .classroom-ac { display:none; } #desktop-study-room .classroom-ac::after { content:''; position:absolute; right:7px; bottom:-7px; left:7px; height:4px; border-top:1px solid #879c96; background:repeating-linear-gradient(90deg,#a7bbb5 0 4px,transparent 4px 7px); transform:skewX(-25deg); } #desktop-study-room .classroom-ac b { font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; } #desktop-study-room .classroom-ac span { color:#69827c; font-size:7px; } #desktop-study-room .classroom-ac i { position:absolute; bottom:-21px; right:20px; width:33px; height:12px; border-top:1px dashed rgba(167,224,215,.43); border-radius:50%; transform:rotate(-13deg); } @media (max-width:780px) { #desktop-study-room .classroom-windows,#desktop-study-room .classroom-ac { display:none; } } #desktop-study-room .classroom-room-switch { display:flex; gap:6px; margin:18px 0 12px; } #desktop-study-room .classroom-room-switch button { min-height:28px; padding:0 10px; border:1px solid #344541; border-radius:3px; background:#121a18; color:#87958f; font-size:10px; } #desktop-study-room .classroom-room-switch button:hover,#desktop-study-room .classroom-room-switch button.active { border-color:#67c9bb; background:#1a3832; color:#d5f5ed; } #desktop-study-room .classroom-seats { grid-template-columns:repeat(3,minmax(112px,1fr)); gap:39px 24px; padding:50px 20px 94px; } #desktop-study-room .classroom-desk { min-height:38px; padding:5px 7px 8px; } #desktop-study-room .classroom-seat { min-height:26px; padding:3px 5px 5px; } #desktop-study-room .classroom-seat::before { bottom:-15px; width:66%; height:10px; } #desktop-study-room .classroom-seat > span { width:17px; height:17px; margin-top:-13px; } #desktop-study-room .classroom-seat small { max-width:64px; font-size:7px; } #desktop-study-room .classroom-layout.room-public .classroom-board::after { content:'公共混合自习区'; } #desktop-study-room .classroom-layout.room-public .classroom-board { background:#263148; } #desktop-study-room .classroom-layout.room-public .classroom-seats { filter:hue-rotate(18deg); } #desktop-study-room .classroom-layout.room-cafe .classroom-board,#desktop-study-room .classroom-layout.room-cafe .classroom-ac { display:none; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe { top:25px; right:28px; bottom:auto; left:auto; width:175px; min-height:62px; } #desktop-study-room .classroom-layout.room-cafe .classroom-seats { padding-top:118px; } #desktop-study-room .classroom-layout.room-cafe .classroom-window { display:none; } #desktop-study-room .classroom-layout.room-cafe { background:#241e1a; box-shadow:inset 0 0 0 10px #1a1512,inset 0 0 0 11px #5a4434; } #desktop-study-room .classroom-layout.room-cafe .classroom-desk { background:#6d4a32; } @media (max-width:780px) { #desktop-study-room .classroom-room-switch { overflow-x:auto; } #desktop-study-room .classroom-room-switch button { flex:0 0 auto; } #desktop-study-room .classroom-seats { grid-template-columns:repeat(3,minmax(70px,1fr)); gap:32px 12px; padding:45px 14px 105px; } #desktop-study-room .classroom-desk { min-height:30px; padding:4px 5px 7px; } #desktop-study-room .classroom-seat { min-height:20px; padding:2px 3px 4px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe { right:14px; width:144px; } } #desktop-study-room .classroom-seat.is-mine > span { display:grid; position:relative; width:17px; height:17px; margin-top:-13px; border:1px solid #f3d8bd; border-radius:50%; background:#e9b68f; box-shadow:0 2px 4px rgba(0,0,0,.32); } #desktop-study-room .classroom-seat.is-mine > span::before { content:''; position:absolute; top:1px; right:1px; left:1px; height:7px; border-radius:50% 50% 42% 42%; background:#49332a; } #desktop-study-room .classroom-seat.is-mine > span::after { content:''; position:absolute; right:4px; bottom:3px; left:4px; height:3px; border-radius:50%; border-bottom:1px solid rgba(80,44,35,.62); } #desktop-study-room .classroom-seat.is-occupied::after,#desktop-study-room .classroom-seat.is-mine::after { top:7px; right:8px; width:10px; height:7px; border:1px solid rgba(91,56,31,.52); border-radius:1px; background:#f1dbad; box-shadow:7px 1px 0 -1px #d9b779,2px 9px 0 -2px #5d89a8; transform:rotate(-5deg); } #desktop-study-room .classroom-seat.is-occupied::after { background:#dbe9da; box-shadow:7px 1px 0 -1px #b9d2be,2px 9px 0 -2px #6d94aa; } #desktop-study-room .classroom-seat.is-occupied small,#desktop-study-room .classroom-seat.is-mine small { padding:0 3px; border-radius:2px; background:rgba(49,28,16,.24); } #desktop-study-room .classroom-podium { cursor:default; font:inherit; text-align:center; } #desktop-study-room .classroom-podium { z-index:12; grid-column:1; justify-self:center; position:relative; } #desktop-study-room .classroom-seats { position:relative; z-index:2; } #desktop-study-room .classroom-podium:not(:disabled) { cursor:pointer; } #desktop-study-room .classroom-podium > span { display:block; margin-top:4px; color:rgba(223,242,230,.48); font:600 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.09em; } #desktop-study-room .classroom-podium:not(:disabled):hover { border-color:#8a6a48; background:#244239; } #desktop-study-room .classroom-podium:disabled { opacity:.84; } #desktop-study-room .classroom-layout.admin-at-podium .classroom-podium { min-height:57px; border-color:#78d8c7; background:#285047; box-shadow:0 0 0 1px rgba(120,216,199,.22),0 3px 0 #1d1711,0 10px 19px rgba(67,207,182,.2),inset 0 0 20px rgba(16,78,65,.36); } #desktop-study-room .classroom-layout.admin-at-podium .classroom-podium::before { content:''; position:absolute; z-index:2; top:-21px; left:50%; width:20px; height:20px; margin-left:-10px; border:1px solid #d8f4e9; border-radius:50%; background:#e9b68f; box-shadow:0 2px 5px rgba(0,0,0,.3); } #desktop-study-room .classroom-layout.admin-at-podium .classroom-podium > span { color:#bcfaec; } #desktop-study-room .classroom-layout.admin-at-podium .classroom-podium > i { box-shadow:0 0 0 4px rgba(103,224,204,.13); } #desktop-study-room .classroom-layout.room-external .classroom-podium { display:block; position:absolute; top:20px; left:50%; width:min(240px,52%); min-height:45px; transform:translateX(-50%); } #desktop-study-room .classroom-layout.room-external .classroom-podium::after { content:'管理员讲台'; left:14px; top:9px; } #desktop-study-room .classroom-layout.room-external.admin-at-podium .classroom-podium { min-height:57px; } @media (max-width:780px) { #desktop-study-room .classroom-layout.room-external .classroom-podium { top:15px; width:min(210px,66%); } } #desktop-study-room .classroom-seat.is-occupied > span { display:grid; position:relative; width:17px; height:17px; margin-top:-13px; border:1px solid #d5eadf; border-radius:50%; background:#94c5b5; color:#123a32; box-shadow:0 2px 5px rgba(0,0,0,.28); } #desktop-study-room .classroom-seat.is-occupied > span::before { content:''; position:absolute; top:1px; right:1px; left:1px; height:7px; border-radius:50% 50% 42% 42%; background:#4e706a; } #desktop-study-room .classroom-seat.is-occupied > span::after { content:''; position:absolute; right:4px; bottom:3px; left:4px; height:3px; border-bottom:1px solid rgba(28,73,63,.6); border-radius:50%; } #desktop-study-room .classroom-seat.is-occupied { cursor:default; opacity:.92; } #desktop-study-room .classroom-seat.is-occupied:hover { background:rgba(213,242,232,.14); } #desktop-study-room .focus-peer-card { position:fixed; z-index:240; inset:0; display:grid; place-items:center; padding:20px; } #desktop-study-room .focus-peer-card[hidden] { display:none; } #desktop-study-room .focus-peer-card-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(3,10,8,.68); backdrop-filter:blur(5px); } #desktop-study-room .focus-peer-card section { position:relative; width:min(370px,calc(100vw - 40px)); padding:28px; overflow:hidden; border:1px solid #4c968a; border-radius:6px; background:#10211e; box-shadow:0 24px 70px rgba(0,0,0,.48); } #desktop-study-room .focus-peer-card section::before { content:''; position:absolute; top:-65px; right:-45px; width:165px; height:165px; border:1px solid rgba(102,216,195,.2); border-radius:50%; box-shadow:0 0 0 25px rgba(102,216,195,.04); } #desktop-study-room .focus-peer-close { position:absolute; z-index:2; top:13px; right:13px; width:26px; height:26px; padding:0; border:1px solid #3d655e; border-radius:3px; background:transparent; color:#9dc0b8; font-size:18px; line-height:1; } #desktop-study-room .focus-peer-avatar { position:relative; z-index:1; display:grid; width:52px; height:52px; place-items:center; border:2px solid #d6eee6; border-radius:50%; background:#8cc5b6; color:#143e35; font-size:20px; font-weight:800; box-shadow:inset 0 11px 0 #557c74,0 5px 16px rgba(0,0,0,.25); } #desktop-study-room .focus-peer-card section > span { position:relative; z-index:1; display:block; margin-top:17px; color:#6ed4c4; font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.13em; } #desktop-study-room .focus-peer-card h2 { position:relative; z-index:1; margin:9px 0 7px; color:#effbf7; font-size:21px; } #desktop-study-room .focus-peer-card p { position:relative; z-index:1; margin:0; color:#96b4ad; font-size:12px; line-height:1.65; } #desktop-study-room .focus-peer-card dl { position:relative; z-index:1; display:grid; gap:0; margin:22px 0 0; border-top:1px solid #29433e; } #desktop-study-room .focus-peer-card dl div { display:grid; grid-template-columns:68px minmax(0,1fr); gap:10px; padding:11px 0; border-bottom:1px solid #29433e; } #desktop-study-room .focus-peer-card dt { color:#6f8f87; font-size:10px; } #desktop-study-room .focus-peer-card dd { margin:0; overflow:hidden; color:#d3e8e2; font-size:11px; text-align:right; text-overflow:ellipsis; white-space:nowrap; } #desktop-study-room .focus-peer-card footer { position:relative; z-index:1; display:flex; align-items:center; gap:7px; margin-top:15px; color:#67847d; font-size:9px; } #desktop-study-room .focus-peer-card footer i { width:5px; height:5px; border-radius:50%; background:#54cbb9; } #desktop-study-room .classroom-ranking-list { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-top:15px; } #desktop-study-room .classroom-ranking-list article { min-width:0; padding:10px; border:1px solid #29413c; border-radius:4px; background:#0c1513; } #desktop-study-room .classroom-ranking-list article.is-mine { border-color:#4db9aa; background:#12302b; } #desktop-study-room .classroom-ranking-list i { display:block; color:#62867e; font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; font-style:normal; } #desktop-study-room .classroom-ranking-list div { min-width:0; margin-top:11px; } #desktop-study-room .classroom-ranking-list strong,#desktop-study-room .classroom-ranking-list span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #desktop-study-room .classroom-ranking-list strong { color:#dcebe7; font-size:11px; } #desktop-study-room .classroom-ranking-list span { margin-top:4px; color:#708983; font-size:9px; } #desktop-study-room .classroom-ranking-list b { display:block; margin-top:12px; color:#68d1c1; font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; } #desktop-study-room .classroom-ranking-note { margin:12px 0 0; color:#60736e; font-size:9px; } #desktop-study-room .focus-complete-dialog { position:fixed; z-index:240; inset:0; display:grid; place-items:center; padding:20px; } #desktop-study-room .focus-complete-dialog[hidden] { display:none; } #desktop-study-room .focus-complete-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(3,10,8,.72); backdrop-filter:blur(5px); } #desktop-study-room .focus-complete-dialog section { position:relative; width:min(400px,calc(100vw - 40px)); padding:27px; overflow:hidden; border:1px solid #5cc9b9; border-radius:6px; background:#11211e; box-shadow:0 24px 70px rgba(0,0,0,.48); } #desktop-study-room .focus-complete-dialog section::after { content:''; position:absolute; top:-55px; right:-38px; width:150px; height:150px; border:1px solid rgba(100,224,202,.22); border-radius:50%; box-shadow:0 0 0 22px rgba(100,224,202,.045),0 0 0 45px rgba(100,224,202,.03); pointer-events:none; } #desktop-study-room .focus-complete-dialog section > span { position:relative; z-index:1; color:#71daca; font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.13em; } #desktop-study-room .focus-complete-dialog h2 { position:relative; z-index:1; margin:12px 0 8px; color:#effbf7; font-size:20px; line-height:1.35; } #desktop-study-room .focus-complete-dialog p { position:relative; z-index:1; margin:0; color:#8eaaa3; font-size:11px; line-height:1.65; } #desktop-study-room .focus-complete-actions { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:22px; } #desktop-study-room .focus-complete-actions button { min-height:34px; padding:0 6px; border:1px solid #385d56; border-radius:3px; background:#152b27; color:#b7d5ce; font-size:10px; } #desktop-study-room .focus-complete-actions button:hover { border-color:#69d4c4; background:#1b3b35; color:#e5f8f3; } #desktop-study-room .focus-complete-dialog footer { position:relative; z-index:1; display:flex; justify-content:flex-end; margin-top:14px; } #desktop-study-room .focus-complete-dialog footer button { min-height:32px; border:0; background:transparent; color:#75bdb1; font-size:10px; } .seat-confirm-task { display:block; margin-top:10px; color:#8fb9b1; font-size:11px; line-height:1.5; } .complete-output-label { position:relative; z-index:1; display:block; margin-top:15px; color:#91b3ab; font-size:10px; line-height:1.4; } .complete-output-label textarea,.complete-output-label input { display:block; width:100%; box-sizing:border-box; margin-top:6px; padding:9px 10px; border:1px solid #31534d; border-radius:4px; outline:0; background:#0d1b19; color:#d9ece7; font:inherit; font-size:11px; } .complete-output-label textarea { min-height:58px; resize:vertical; line-height:1.5; } .complete-output-label textarea:focus,.complete-output-label input:focus { border-color:#62cabb; box-shadow:0 0 0 2px rgba(98,202,187,.12); } /* The first viewport is a study action, not a room tour. */ #desktop-study-room .focus-main-grid { margin-top:0 !important; padding:20px; border:1px solid #315149; border-radius:8px; background:linear-gradient(135deg,#122923,#10201d); box-shadow:0 14px 28px rgba(3,18,14,.18); } #desktop-study-room .focus-main-grid .focus-timer-panel { padding:2px 2px 0; border:0; background:transparent; box-shadow:none; } #desktop-study-room .focus-main-grid .focus-insights { border-left:1px solid #2c4740; } #desktop-study-room .focus-section-head h2 { font-size:19px; } #desktop-study-room .focus-clock { margin:16px auto 13px; } #desktop-study-room .focus-task-label { display:block; margin:0 auto; max-width:390px; color:#86aa9e; font-size:10px; } #desktop-study-room .focus-task-label .focus-task { width:100%; margin:6px 0 0; } #desktop-study-room .focus-controls { max-width:390px; margin:12px auto 0; } #desktop-study-room .classroom-panel { margin-top:18px; border-radius:8px; } #desktop-study-room .classroom-head { padding-bottom:4px; } #desktop-study-room .classroom-note { max-width:430px; line-height:1.5; } #desktop-study-room .classroom-ranking { margin-top:18px; border-radius:8px; } #desktop-study-room .study-wish-wall { margin:0 0 22px !important; border-radius:8px !important; box-shadow:none !important; } #desktop-study-room .focus-history { margin-top:18px; border-radius:8px; } #desktop-study-room .focus-log article { align-items:start; } #desktop-study-room .focus-log article span { white-space:normal; line-height:1.55; } @media (max-width:780px) { #desktop-study-room .focus-main-grid { padding:15px; } #desktop-study-room .focus-main-grid .focus-insights { margin-top:18px; padding-top:18px; border-top:1px solid #2c4740; border-left:0; } #desktop-study-room .classroom-location-controls { position:static; margin-top:12px; } #desktop-study-room .classroom-head { display:block; } } @media (max-width:780px) { #desktop-study-room .classroom-ranking-list { grid-template-columns:repeat(2,minmax(0,1fr)); } #desktop-study-room .classroom-ranking-list article:last-child { display:none; } #desktop-study-room .focus-complete-dialog section { padding:22px; } } #desktop-study-room .focus-session-float { position:fixed; z-index:190; right:34px; bottom:30px; width:176px; padding:10px 12px 12px; border:1px solid #4b9d91; border-radius:5px; background:#122321; color:#e4f7f3; box-shadow:0 14px 30px rgba(0,0,0,.35); } #desktop-study-room .focus-session-float[hidden] { display:none; } #desktop-study-room .focus-session-float header { display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:grab; user-select:none; } #desktop-study-room .focus-session-float.is-dragging header { cursor:grabbing; } #desktop-study-room .focus-session-float header > div { display:flex; align-items:center; gap:6px; color:#9ee7da; font-size:10px; font-weight:700; } #desktop-study-room .focus-session-float header i { width:6px; height:6px; border-radius:50%; background:#59d6c5; box-shadow:0 0 0 4px rgba(89,214,197,.12); } #desktop-study-room .focus-session-float header button { width:22px; height:22px; padding:0; border:1px solid #426863; border-radius:3px; background:transparent; color:#a4beb9; font-size:17px; line-height:1; } #desktop-study-room .focus-session-float header button:hover { border-color:#eb9b9b; color:#f2b5b5; } #desktop-study-room .focus-session-float > strong { display:block; margin:10px 0 4px; color:#f0fbf8; font:600 25px/1 ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; } #desktop-study-room .focus-session-float > span { color:#87a8a2; font-size:9px; } /* Cat food is earned here, so the entry belongs in the study-room header. */ #desktop-study-room .focus-head-tools { display:flex; align-items:center; gap:10px; } #desktop-study-room .focus-cat-entry { display:grid; grid-template-columns:auto auto; align-items:center; column-gap:7px; min-width:142px; padding:8px 11px; border:1px solid rgba(111,229,208,.34); border-radius:10px; background:rgba(31,88,79,.22); color:#c8f6ed; text-align:left; } #desktop-study-room .focus-cat-entry span { font-size:10px; color:#9de5da; } #desktop-study-room .focus-cat-entry strong { font-size:17px; line-height:1; color:#effffb; } #desktop-study-room .focus-cat-entry small { grid-column:1 / -1; margin-top:4px; color:#8fb9b1; font-size:9px; } #desktop-study-room .focus-cat-entry:hover { border-color:#6ee7d4; background:rgba(41,125,111,.32); } @media (max-width:780px) { #desktop-study-room .focus-head-tools { width:100%; justify-content:space-between; } #desktop-study-room .focus-head { flex-wrap:wrap; } } @media (max-width:780px) { #desktop-study-room .focus-session-float { right:16px; bottom:16px; width:155px; } } #linka-global-focus-float { position:fixed; z-index:1000; right:28px; bottom:28px; width:204px; padding:12px; border:1px solid rgba(91,211,188,.52); border-radius:14px; background:linear-gradient(145deg,rgba(22,58,52,.97),rgba(12,35,32,.98)); color:#effbf7; box-shadow:0 18px 42px rgba(8,33,29,.3),0 0 0 1px rgba(255,255,255,.05) inset; backdrop-filter:blur(16px); } #linka-global-focus-float[hidden] { display:none; } #linka-global-focus-float > div { display:flex; align-items:center; justify-content:space-between; } #linka-global-focus-float > div span { display:flex; align-items:center; gap:6px; color:#a8e9dc; font-size:11px; font-weight:700; } #linka-global-focus-float > div i { width:7px; height:7px; border-radius:50%; background:#68dbc8; box-shadow:0 0 0 4px rgba(104,219,200,.14); } #linka-global-focus-float > div button { border:0; background:transparent; color:#95b9b1; font-size:10px; cursor:pointer; } #linka-global-focus-float > strong { display:block; margin:13px 0 4px; font:700 30px/1 ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; letter-spacing:-1px; } #linka-global-focus-float small { display:block; overflow:hidden; color:#9bb8b1; font-size:10px; text-overflow:ellipsis; white-space:nowrap; } #linka-global-focus-float > button { width:100%; margin-top:11px; padding:8px 10px; border:1px solid rgba(132,223,207,.24); border-radius:8px; background:rgba(132,223,207,.09); color:#c4f2e9; font-size:10px; cursor:pointer; } #linka-global-focus-float > button:hover { background:rgba(132,223,207,.17); } @media (max-width:780px) { #linka-global-focus-float { right:16px; bottom:16px; width:184px; } } /* BRIGHT CLASSROOM EOF LOCK — a fixed 24-desk layout, daylight and lived-in seats. */ #desktop-study-room .classroom-layout.room-school,#desktop-study-room .classroom-layout.room-public { min-height:620px !important; grid-template-columns:1fr !important; background:linear-gradient(180deg,#d9efe9 0%,#bad8ce 38%,#a9cabc 100%) !important; box-shadow:inset 0 0 0 10px #e9f4ef,inset 0 0 0 11px #6e9488,0 12px 30px rgba(13,54,47,.16) !important; } #desktop-study-room .classroom-layout.room-school::before,#desktop-study-room .classroom-layout.room-public::before { z-index:0 !important; opacity:.34 !important; background-image:linear-gradient(90deg,transparent 49%,rgba(64,116,103,.13) 50%,transparent 51%),linear-gradient(0deg,transparent 49%,rgba(64,116,103,.12) 50%,transparent 51%) !important; background-size:52px 52px !important; } #desktop-study-room .classroom-layout.room-school .classroom-seats,#desktop-study-room .classroom-layout.room-public .classroom-seats { position:absolute !important; z-index:8 !important; inset:188px 48px 42px !important; display:grid !important; grid-template-columns:repeat(4,minmax(120px,1fr)) !important; grid-template-rows:repeat(6,minmax(54px,1fr)) !important; align-content:stretch !important; gap:25px 36px !important; padding:0 !important; } #desktop-study-room .classroom-layout.room-school .classroom-desk,#desktop-study-room .classroom-layout.room-public .classroom-desk { position:relative !important; width:100% !important; min-width:0 !important; min-height:0 !important; padding:5px 7px 9px !important; border-color:#8f603d !important; background:linear-gradient(180deg,#c99563,#9a653e) !important; box-shadow:inset 0 2px rgba(255,239,205,.45),inset 0 -5px rgba(65,34,17,.27),0 6px 0 #513320,0 10px 12px rgba(62,45,30,.2) !important; } #desktop-study-room .classroom-windows { z-index:4 !important; top:28px !important; grid-template-columns:repeat(2,44px) !important; grid-template-rows:repeat(2,52px) !important; gap:4px !important; padding:7px !important; border:6px solid #f4f1dc !important; background:#8ab9c4 !important; box-shadow:0 4px 0 #6d8d8c,0 10px 22px rgba(66,125,134,.22) !important; } #desktop-study-room .classroom-windows i { width:44px !important; height:52px !important; background:linear-gradient(145deg,#d8f7ff,#91d5e4 65%,#79bdcc) !important; box-shadow:inset 0 16px rgba(255,255,255,.36) !important; } #desktop-study-room .classroom-windows-left { left:34px !important; right:auto !important; } #desktop-study-room .classroom-windows-right { right:34px !important; left:auto !important; } #desktop-study-room .classroom-sunlight { position:absolute !important; z-index:2 !important; top:123px !important; left:9% !important; width:78% !important; height:62% !important; pointer-events:none !important; opacity:.7 !important; background:linear-gradient(112deg,rgba(255,251,202,.54),rgba(255,247,181,.14) 36%,transparent 58%),linear-gradient(68deg,rgba(255,251,205,.38),transparent 46%) !important; clip-path:polygon(3% 0,29% 0,100% 100%,71% 100%) !important; mix-blend-mode:screen !important; } #desktop-study-room .classroom-plant { z-index:9 !important; transform:scale(1.08); filter:drop-shadow(0 6px 5px rgba(26,70,46,.2)); } #desktop-study-room .classroom-plant-one { right:42px !important; bottom:46px !important; } #desktop-study-room .classroom-plant-two { left:42px !important; bottom:42px !important; } #desktop-study-room .classroom-seat.is-occupied::before { content:'' !important; position:absolute !important; z-index:4 !important; top:4px !important; left:50% !important; width:26px !important; height:16px !important; border:1px solid rgba(81,50,30,.48) !important; border-radius:2px !important; background:linear-gradient(90deg,#f1d49b 0 48%,#d66d5d 49% 100%) !important; box-shadow:11px 5px 0 -5px #74b9c6 !important; transform:translateX(-50%) rotate(-5deg) !important; } #desktop-study-room .classroom-seat.is-occupied[data-study-prop="1"]::before { width:10px !important; height:13px !important; border-radius:2px 2px 5px 5px !important; background:#6eb7c7 !important; box-shadow:14px 6px 0 -5px #f1d49b !important; } #desktop-study-room .classroom-seat.is-occupied[data-study-prop="2"]::before { width:30px !important; height:12px !important; background:linear-gradient(90deg,#e2a46b 0 48%,#f5e4ad 49% 100%) !important; box-shadow:none !important; } #desktop-study-room .classroom-seat.is-occupied { opacity:1 !important; } @media (max-width:900px) { #desktop-study-room .classroom-layout.room-school,#desktop-study-room .classroom-layout.room-public { min-height:760px !important; } #desktop-study-room .classroom-layout.room-school .classroom-seats,#desktop-study-room .classroom-layout.room-public .classroom-seats { inset:178px 22px 30px !important; grid-template-columns:repeat(3,minmax(82px,1fr)) !important; grid-template-rows:repeat(8,minmax(48px,1fr)) !important; gap:20px 18px !important; } #desktop-study-room .classroom-windows { transform:scale(.78); transform-origin:top; } #desktop-study-room .classroom-windows-left { transform-origin:top left; left:10px !important; } #desktop-study-room .classroom-windows-right { transform-origin:top right; right:10px !important; } } #desktop-study-room .classroom-school-picker,#desktop-study-room .classroom-floor-picker,#desktop-study-room .classroom-name-picker { height:28px; padding:0 9px; border:1px solid #3c504b; border-radius:3px; background:#121a18; color:#b6c8c3; font-size:10px; } #desktop-study-room .classroom-location-controls .classroom-floor-picker,#desktop-study-room .classroom-location-controls .classroom-name-picker { height:31px; border-color:rgba(104,216,198,.3); border-radius:999px; background:rgba(21,47,43,.86); color:#bde7df; } #desktop-study-room .classroom-location-controls .classroom-name-picker { min-width:132px; } #desktop-study-room .classroom-school-picker { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #desktop-study-room .classroom-floor-picker { display:flex; align-items:center; gap:5px; color:#8ca09a; } #desktop-study-room .classroom-floor-picker select { border:0; outline:0; background:transparent; color:#d7eee8; font-size:10px; } #desktop-study-room .classroom-name-picker { display:flex; align-items:center; gap:5px; min-width:118px; color:#8ca09a; } #desktop-study-room .classroom-name-picker select { min-width:0; border:0; outline:0; background:transparent; color:#d7eee8; font-size:10px; } #desktop-study-room .classroom-location { display:flex; align-items:center; gap:8px; margin-bottom:12px; color:#88aaa2; font-size:10px; } #desktop-study-room .classroom-location span { color:#c8ded7; font-weight:700; } #desktop-study-room .classroom-location i { width:3px; height:3px; border-radius:50%; background:#56cdbd; } #desktop-study-room .classroom-location b { color:#738a83; font-weight:500; } #desktop-study-room .classroom-desk { background:#805636; border-color:#895c38; box-shadow:inset 0 2px 0 rgba(255,222,174,.2),inset 0 -4px 0 rgba(38,20,11,.3),0 5px 0 #392317,0 8px 8px rgba(0,0,0,.23); } #desktop-study-room .classroom-layout.room-cafe { background:#211814; box-shadow:inset 0 0 0 10px #16100e,inset 0 0 0 11px #624536; } #desktop-study-room .classroom-layout.room-cafe::before { opacity:.28; background-image:linear-gradient(90deg,transparent 49.4%,rgba(237,196,145,.08) 50%,transparent 50.6%),linear-gradient(0deg,transparent 49.4%,rgba(237,196,145,.06) 50%,transparent 50.6%); } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe { border-color:#7e5439; border-radius:4px; background:#3d2920; box-shadow:inset 0 2px 0 rgba(255,219,172,.15),0 6px 0 #1f140f,0 12px 20px rgba(0,0,0,.34); } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe::after { content:''; position:absolute; right:11px; bottom:8px; width:20px; height:13px; border:2px solid #d9bb8b; border-top:0; border-radius:0 0 7px 7px; } #desktop-study-room .classroom-layout.room-cafe .classroom-desk { background:#734a30; border-color:#8c603f; } #desktop-study-room .classroom-layout.room-cafe .classroom-plant-one { transform:scale(1.2); } @media (max-width:780px) { #desktop-study-room .classroom-school-picker { max-width:112px; } #desktop-study-room .classroom-location { margin-top:-4px; } } @media (max-width:780px) { #desktop-study-room .classroom-location-controls { position:static; margin-top:12px; } #desktop-study-room .classroom-head { display:block; } } #desktop-study-room .classroom-seat-confirm { position:fixed; z-index:230; inset:0; display:grid; place-items:center; padding:20px; } #desktop-study-room .classroom-seat-confirm[hidden] { display:none; } #desktop-study-room .classroom-seat-confirm-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(4,8,7,.62); backdrop-filter:blur(3px); } #desktop-study-room .classroom-seat-confirm section { position:relative; width:min(336px,calc(100vw - 40px)); padding:24px; border:1px solid #507a73; border-radius:6px; background:#14211f; box-shadow:0 22px 54px rgba(0,0,0,.42); } #desktop-study-room .classroom-seat-confirm section > span { color:#67cdbf; font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.13em; } #desktop-study-room .classroom-seat-confirm h2 { margin:12px 0 8px; color:#eff8f5; font-size:18px; } #desktop-study-room .classroom-seat-confirm p { margin:0; color:#8ea9a2; font-size:11px; } #desktop-study-room .classroom-seat-confirm footer { display:flex; justify-content:flex-end; gap:8px; margin-top:22px; } #desktop-study-room .classroom-seat-confirm footer button { min-height:32px; padding:0 12px; border:1px solid #3d5954; border-radius:3px; background:transparent; color:#a4bbb5; font-size:10px; } #desktop-study-room .classroom-seat-confirm footer button:last-child { border-color:#55c8b8; background:#35aa9b; color:#06211d; font-weight:700; } #desktop-study-room .classroom-create-school { width:28px; height:28px; padding:0; border:1px solid #4b8078; border-radius:3px; background:#18312d; color:#83ddd0; font-size:17px; line-height:1; } #desktop-study-room .classroom-school-picker { min-width:126px; appearance:auto; cursor:pointer; } #desktop-study-room .classroom-layout.room-school .classroom-cafe,#desktop-study-room .classroom-layout.room-public .classroom-cafe,#desktop-study-room .classroom-layout.room-external .classroom-cafe { display:none; } #desktop-study-room .classroom-layout.room-external { background:#1b2526; box-shadow:inset 0 0 0 10px #111819,inset 0 0 0 11px #42595a; } #desktop-study-room .classroom-layout.room-external .classroom-board::after { content:'校外安静自习区'; } #desktop-study-room .classroom-seats { grid-template-columns:repeat(2,minmax(180px,1fr)); gap:43px 54px; padding:52px 34px 100px; } #desktop-study-room .classroom-desk { min-height:48px; padding:6px 10px 10px; } #desktop-study-room .classroom-seat { min-height:33px; padding:4px 8px 7px; } #desktop-study-room .classroom-seat::before { bottom:-17px; width:70%; height:11px; } #desktop-study-room .classroom-seat small { max-width:94px; font-size:8px; } @media (max-width:780px) { #desktop-study-room .classroom-seats { grid-template-columns:repeat(2,minmax(115px,1fr)); gap:34px 22px; padding:48px 16px 110px; } #desktop-study-room .classroom-desk { min-height:38px; padding:5px 7px 8px; } #desktop-study-room .classroom-seat { min-height:27px; padding:3px 5px 5px; } #desktop-study-room .classroom-school-picker { min-width:108px; max-width:132px; } } #desktop-study-room .classroom-layout.room-public .classroom-seats { grid-template-columns:repeat(3,minmax(112px,1fr)); gap:33px 25px; padding-right:24px; padding-left:24px; } #desktop-study-room .classroom-layout.room-cafe .classroom-seats { grid-template-columns:repeat(3,minmax(94px,1fr)); gap:48px 32px; padding-right:28px; padding-left:28px; } #desktop-study-room .classroom-layout.room-cafe .classroom-desk { border-radius:50%; background:#6d4932; box-shadow:inset 0 2px 0 rgba(255,223,180,.16),0 5px 0 #372116,0 9px 9px rgba(0,0,0,.26); } #desktop-study-room .classroom-layout.room-cafe .classroom-desk::after { display:none; } #desktop-study-room .classroom-layout.room-external { min-height:630px; } #desktop-study-room .classroom-layout.room-external .classroom-board { display:none; } #desktop-study-room .classroom-layout.room-external .classroom-seats { display:grid; grid-template-columns:repeat(4,minmax(86px,1fr)); gap:28px 30px; padding:52px 34px 98px; } #desktop-study-room .classroom-booth { position:relative; min-height:54px; padding:9px 7px 7px; border:1px solid #58635f; border-top:8px solid #7f8b86; border-radius:3px 3px 4px 4px; background:#283330; box-shadow:inset 0 -6px 0 rgba(10,15,13,.2),0 5px 0 #16201d,0 9px 8px rgba(0,0,0,.25); color:#dbe7e2; } #desktop-study-room .classroom-booth::before,#desktop-study-room .classroom-booth::after { content:''; position:absolute; top:-8px; bottom:-4px; width:7px; background:#68746f; } #desktop-study-room .classroom-booth::before { left:-7px; border-radius:3px 0 0 3px; } #desktop-study-room .classroom-booth::after { right:-7px; border-radius:0 3px 3px 0; } #desktop-study-room .classroom-booth small { display:block; margin-top:13px; overflow:hidden; color:#aabbb5; font-size:7px; text-overflow:ellipsis; white-space:nowrap; } #desktop-study-room .classroom-booth b { position:absolute; top:4px; left:6px; color:#9cb0a9; font-size:7px; font-weight:500; } #desktop-study-room .classroom-booth > span { display:none; } #desktop-study-room .classroom-booth:hover { border-color:#a2c9bf; background:#34433e; } #desktop-study-room .classroom-booth.is-mine { border-color:#6ce1ce; border-top-color:#6ce1ce; background:#315b52; box-shadow:0 0 0 1px rgba(108,225,206,.15),inset 0 -6px 0 rgba(10,63,53,.2),0 5px 0 #173d35; } #desktop-study-room .classroom-booth.is-mine > span { position:absolute; top:-17px; left:50%; display:block; width:18px; height:18px; margin-left:-9px; border:1px solid #f3d8bd; border-radius:50%; background:#e9b68f; } #desktop-study-room .classroom-booth.is-mine > span::before { content:''; position:absolute; top:1px; right:1px; left:1px; height:7px; border-radius:50% 50% 42% 42%; background:#49332a; } @media (max-width:780px) { #desktop-study-room .classroom-layout.room-public .classroom-seats,#desktop-study-room .classroom-layout.room-cafe .classroom-seats { grid-template-columns:repeat(2,minmax(105px,1fr)); } #desktop-study-room .classroom-layout.room-external .classroom-seats { grid-template-columns:repeat(3,minmax(70px,1fr)); gap:25px 19px; padding:48px 18px 100px; } } #desktop-study-room .classroom-layout.room-external { overflow:hidden; background:#33251e; box-shadow:inset 0 0 0 11px #201611,inset 0 0 0 13px #805a3a,0 0 0 1px #ba8a58; } #desktop-study-room .classroom-layout.room-external::before { opacity:1; background-image:repeating-linear-gradient(90deg,transparent 0 76px,rgba(255,214,159,.07) 77px 78px),repeating-linear-gradient(0deg,transparent 0 76px,rgba(255,214,159,.055) 77px 78px); } #desktop-study-room .classroom-layout.room-external .classroom-windows { top:25px; right:27px; border-color:#d7b27e; background:#172a3b; box-shadow:0 3px 0 #25170f,0 8px 24px rgba(255,181,97,.12); } #desktop-study-room .classroom-layout.room-external .classroom-windows i { background:#31516c; box-shadow:inset 0 13px 0 rgba(231,188,118,.14); } #desktop-study-room .classroom-layout.room-external .classroom-windows i:nth-child(2),#desktop-study-room .classroom-layout.room-external .classroom-windows i:nth-child(5) { background:#d7a55f; box-shadow:0 0 12px rgba(237,174,87,.28); } #desktop-study-room .classroom-layout.room-external .classroom-ac { display:none; } #desktop-study-room .classroom-layout.room-external .classroom-plant-one { right:38px; bottom:42px; transform:scale(1.1); } #desktop-study-room .classroom-layout.room-external .classroom-plant-two { left:35px; bottom:22px; transform:scale(.82); } #desktop-study-room .classroom-layout.room-external .classroom-seats { position:relative; z-index:2; padding-top:154px; } #desktop-study-room .classroom-layout.room-external .classroom-seats::before { content:'NIGHT STUDY LOUNGE · 安静自习中'; position:absolute; top:78px; left:50%; width:min(420px,82%); padding:9px 14px; border:1px solid #765238; border-radius:3px; background:#261b16; color:#ddb47c; font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.11em; text-align:center; transform:translateX(-50%); box-shadow:0 5px 14px rgba(0,0,0,.2); } #desktop-study-room .classroom-layout.room-external .classroom-booth { min-height:59px; border-color:#9d6f47; border-top-color:#d5a468; background:#5a3b28; box-shadow:inset 0 3px 0 rgba(255,225,181,.17),inset 0 -7px 0 rgba(38,20,11,.32),0 6px 0 #2a170d,0 11px 12px rgba(0,0,0,.3); color:#fff0dc; } #desktop-study-room .classroom-layout.room-external .classroom-booth::before,#desktop-study-room .classroom-layout.room-external .classroom-booth::after { background:#754b2e; box-shadow:inset 1px 0 rgba(255,218,165,.11); } #desktop-study-room .classroom-layout.room-external .classroom-booth small { color:#e7c29b; } #desktop-study-room .classroom-layout.room-external .classroom-booth b { color:#f0cf9e; } #desktop-study-room .classroom-layout.room-external .classroom-booth:hover { border-color:#f0c681; background:#6c472e; } #desktop-study-room .classroom-layout.room-external .classroom-booth.is-mine { border-color:#7ce0c8; border-top-color:#9de9d5; background:#3f6a59; box-shadow:0 0 0 1px rgba(135,231,208,.24),inset 0 3px 0 rgba(239,255,246,.18),inset 0 -7px 0 rgba(13,57,45,.3),0 6px 0 #173a2f,0 11px 17px rgba(86,214,187,.19); } #desktop-study-room .classroom-layout.room-external .classroom-booth.is-occupied { border-color:#c7a372; border-top-color:#e6c78d; background:#654631; } #desktop-study-room .classroom-layout.room-external .classroom-booth.is-occupied > span { position:absolute; top:-17px; left:50%; display:grid; width:18px; height:18px; margin-left:-9px; place-items:center; border:1px solid #f2dfbf; border-radius:50%; background:#9bc5b8; color:#173c33; font-size:8px; font-weight:800; } #desktop-study-room .classroom-layout.room-external .classroom-booth.is-occupied small { color:#f0d5b0; } @media (max-width:780px) { #desktop-study-room .classroom-layout.room-external .classroom-seats { padding-top:134px; } #desktop-study-room .classroom-layout.room-external .classroom-seats::before { top:72px; width:88%; font-size:7px; } #desktop-study-room .classroom-layout.room-external .classroom-plant-one { right:17px; bottom:36px; transform:scale(.78); } #desktop-study-room .classroom-layout.room-external .classroom-plant-two { display:none; } } #desktop-study-room .classroom-layout.room-cafe { min-height:620px; overflow:hidden; background:#c89a63; box-shadow:inset 0 0 0 12px #835c3d,inset 0 0 0 14px #e1bf8c,0 0 0 1px #5b3d2a; } #desktop-study-room .classroom-layout.room-cafe::before { inset:14px; opacity:.26; background-image:linear-gradient(90deg,rgba(93,58,31,.18) 1px,transparent 1px),linear-gradient(0deg,rgba(93,58,31,.15) 1px,transparent 1px); background-size:28px 28px; } #desktop-study-room .classroom-layout.room-cafe .classroom-windows,#desktop-study-room .classroom-layout.room-cafe .classroom-ac,#desktop-study-room .classroom-layout.room-cafe .classroom-legend { display:none; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe { z-index:5; top:28px; right:28px; left:32%; display:block; width:auto; min-height:74px; padding:13px 18px; border:3px solid #74482f; border-radius:2px; background:#8a5839; box-shadow:inset 0 3px 0 rgba(255,225,183,.25),0 6px 0 #51301f,0 12px 18px rgba(66,36,18,.25); } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe::before { content:'ESPRESSO · HAND DRIP · DESSERT'; top:14px; left:18px; width:auto; height:auto; border:0; border-radius:0; background:none; box-shadow:none; color:#f3dbb1; font:700 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe span { position:absolute; right:18px; bottom:13px; color:#f8e5c3; font-size:10px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe b { position:absolute; right:18px; bottom:0; transform:translateY(18px); padding:3px 8px; border:1px solid #7e5437; background:#e6c18d; color:#68412d; font-size:7px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe i { right:100px; top:20px; width:25px; height:22px; border:3px solid #2d2c2a; border-radius:4px; background:#b7bbb6; transform:none; box-shadow:37px 0 0 -2px #2e2e2b; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe em { position:absolute; top:20px; right:55px; width:12px; height:12px; border-radius:50%; background:#dac59f; box-shadow:0 17px 0 #dac59f,18px 0 0 #dac59f,18px 17px 0 #dac59f; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe u { position:absolute; top:-25px; left:25%; width:2px; height:25px; background:#463124; text-decoration:none; box-shadow:120px 0 0 #463124,240px 0 0 #463124; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe u::before { content:''; position:absolute; top:22px; left:-8px; width:18px; height:8px; border-radius:10px 10px 3px 3px; background:#e4c36f; box-shadow:120px 0 #e4c36f,240px 0 #e4c36f; } #desktop-study-room .classroom-layout.room-cafe .classroom-seats { position:absolute; z-index:3; inset:140px 30px 36px 30px; display:grid; grid-template-columns:repeat(4,minmax(86px,1fr)); grid-template-rows:repeat(4,minmax(64px,1fr)); gap:26px 34px; padding:0; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table { min-height:0; align-self:center; justify-self:center; width:68px; height:42px; padding:4px; border:2px solid #8b5e3d; border-radius:3px; background:#b98556; box-shadow:inset 0 2px 0 rgba(255,234,196,.32),0 5px 0 #6e442c,0 8px 8px rgba(77,42,19,.24); } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table .classroom-seat { min-height:0; padding:3px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table .classroom-seat::before { bottom:-15px; width:62%; height:9px; background:#7f573d; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table:nth-child(3n+1) { width:54px; height:54px; border-radius:50%; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table:nth-child(3n+2) { width:88px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table:nth-child(4n) { transform:rotate(90deg); } #desktop-study-room .classroom-layout.room-cafe .cafe-table-1 { grid-column:1; grid-row:1; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-2 { grid-column:2; grid-row:1; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-3 { grid-column:3; grid-row:2; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-4 { grid-column:4; grid-row:2; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-5 { grid-column:1; grid-row:3; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-6 { grid-column:2; grid-row:3; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-7 { grid-column:3; grid-row:4; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-8 { grid-column:4; grid-row:4; } #desktop-study-room .classroom-layout.room-cafe .classroom-plant-one { z-index:4; right:28px; bottom:42px; transform:scale(1.25); } #desktop-study-room .classroom-layout.room-cafe .classroom-plant-two { z-index:4; left:28px; bottom:42px; transform:scale(1); } @media (max-width:780px) { #desktop-study-room .classroom-layout.room-cafe { min-height:540px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe { left:18px; right:18px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe u { left:18%; box-shadow:82px 0 0 #463124,164px 0 0 #463124; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe u::before { box-shadow:82px 0 #e4c36f,164px 0 #e4c36f; } #desktop-study-room .classroom-layout.room-cafe .classroom-seats { inset:137px 18px 28px; grid-template-columns:repeat(3,minmax(62px,1fr)); grid-template-rows:repeat(6,minmax(55px,1fr)); gap:19px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table { width:57px; height:38px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table:nth-child(3n+2) { width:74px; } } #desktop-study-room .classroom-layout.room-cafe .classroom-seats { display:block; inset:137px 42px 34px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table { position:absolute; width:58px; height:38px; padding:3px; border-radius:4px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table:nth-child(3n+1) { width:48px; height:48px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table:nth-child(3n+2) { width:76px; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-1 { top:2%; left:5%; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-2 { top:4%; left:26%; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-3 { top:7%; right:27%; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-4 { top:25%; right:6%; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-5 { top:40%; left:7%; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-6 { top:41%; left:35%; width:86px; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-7 { top:53%; right:29%; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-8 { bottom:4%; left:28%; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-9 { right:7%; bottom:5%; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-6::before { content:''; position:absolute; top:-10px; right:-8px; bottom:-10px; width:13px; border:2px solid #754a31; border-left:0; border-radius:0 10px 10px 0; background:#6a4937; box-shadow:0 3px 0 rgba(61,35,23,.36); } #desktop-study-room .classroom-layout.room-cafe .cafe-table-6 { border-radius:3px 10px 10px 3px; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-6 .classroom-seat:first-child { border-right:1px solid rgba(79,42,23,.22); } @media (max-width:780px) { #desktop-study-room .classroom-layout.room-cafe .classroom-seats { display:grid; inset:138px 18px 28px; grid-template-columns:repeat(3,minmax(56px,1fr)); grid-template-rows:repeat(3,minmax(65px,1fr)); gap:18px 14px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table,#desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table:nth-child(3n+1),#desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table:nth-child(3n+2),#desktop-study-room .classroom-layout.room-cafe .cafe-table-6 { position:relative; top:auto; right:auto; bottom:auto; left:auto; width:54px; height:36px; align-self:center; justify-self:center; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table:nth-child(3n+1) { width:45px; height:45px; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-6::before { display:none; } } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe { right:28px; left:28px; min-height:72px; } #desktop-study-room .classroom-layout.room-cafe .classroom-seats { inset:139px 50px 42px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table,#desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table:nth-child(3n+1),#desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table:nth-child(3n+2),#desktop-study-room .classroom-layout.room-cafe .cafe-table-6 { transform:none; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table { width:56px; height:37px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table:nth-child(3n+1) { width:46px; height:46px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table:nth-child(3n+2) { width:70px; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-1 { top:4%; left:5%; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-2 { top:5%; left:27%; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-3 { top:5%; right:7%; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-4 { top:35%; right:7%; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-5 { top:38%; left:7%; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-6 { top:41%; left:39%; width:76px; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-7 { right:29%; bottom:7%; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-8 { bottom:6%; left:25%; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-9 { right:7%; bottom:7%; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table .classroom-seat { min-width:0; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table .classroom-seat b { opacity:.54; } #desktop-study-room .classroom-name-picker,#desktop-study-room [data-classroom-name-display],#desktop-study-room .classroom-location > i:has(+ [data-classroom-name-display]) { display:none !important; } @media (max-width:780px) { #desktop-study-room .classroom-layout.room-cafe .classroom-cafe { right:18px; left:18px; } #desktop-study-room .classroom-layout.room-cafe .classroom-seats { inset:138px 18px 28px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table,#desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table:nth-child(3n+1),#desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table:nth-child(3n+2),#desktop-study-room .classroom-layout.room-cafe .cafe-table-6 { width:52px; height:35px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table:nth-child(3n+1) { width:43px; height:43px; } } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe i { right:114px; top:27px; width:18px; height:23px; border:2px solid #263531; border-radius:8px 8px 5px 5px; background:#426c63; box-shadow:none; transform:none; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe i::before { content:''; position:absolute; top:-10px; left:3px; width:10px; height:10px; border:2px solid #f2c69c; border-radius:50%; background:#5a3b2c; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe i::after { content:''; position:absolute; top:5px; left:-12px; width:39px; height:10px; border-top:3px solid #f2c69c; border-radius:50%; transform:rotate(-7deg); } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe em { top:18px; right:48px; width:28px; height:25px; border:3px solid #30312e; border-radius:3px; background:#aeb5b1; box-shadow:inset 0 4px 0 #69716d,0 14px 0 -8px #2b2d2b; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe em::before { content:''; position:absolute; top:5px; left:5px; width:5px; height:5px; border-radius:50%; background:#ece5d2; box-shadow:10px 0 #ece5d2,0 10px #ece5d2,10px 10px #ece5d2; } #desktop-study-room .classroom-layout.room-cafe::after { content:'TODAY\A ESPRESSO · LATTE\A HAND DRIP · CAKE'; white-space:pre; position:absolute; z-index:4; top:28px; left:28px; width:170px; min-height:66px; padding:12px 13px; border:4px solid #70452e; border-radius:2px; background:#23362f; box-shadow:0 5px 0 #4c2d1e,0 10px 16px rgba(69,37,17,.22); color:#e5d2a8; font:700 8px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; writing-mode:initial; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe { box-shadow:inset 0 3px 0 rgba(255,225,183,.25),0 6px 0 #51301f,0 12px 18px rgba(66,36,18,.25),-70px 0 0 -54px #583725; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe::after { right:16px; bottom:-30px; width:14px; height:14px; border:5px solid #583725; border-top:0; border-radius:0 0 8px 8px; background:#b47a4d; box-shadow:-28px 0 0 -5px #b47a4d,-56px 0 0 -5px #b47a4d,-84px 0 0 -5px #b47a4d,-112px 0 0 -5px #b47a4d; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table:nth-child(5n+1) { box-shadow:inset 0 2px 0 rgba(255,234,196,.32),0 5px 0 #6e442c,0 8px 8px rgba(77,42,19,.24),0 0 0 6px rgba(109,70,41,.16); } #desktop-study-room .classroom-layout.room-cafe .classroom-plant-one::after { content:''; position:absolute; bottom:-10px; left:-13px; width:48px; height:8px; border-radius:50%; background:rgba(70,43,25,.18); } @media (max-width:780px) { #desktop-study-room .classroom-layout.room-cafe::after { top:18px; left:16px; width:124px; min-height:50px; padding:8px; border-width:3px; font-size:6px; } } #desktop-study-room .classroom-layout.room-external { overflow:hidden; background:#1b2825; } #desktop-study-room .classroom-layout.room-external::before { opacity:.55; background-image:linear-gradient(116deg,rgba(255,221,139,.22),transparent 34%),linear-gradient(90deg,transparent 49.4%,rgba(207,236,219,.06) 50%,transparent 50.6%),linear-gradient(0deg,transparent 49.4%,rgba(207,236,219,.06) 50%,transparent 50.6%); background-size:auto,34px 34px,34px 34px; } #desktop-study-room .classroom-layout.room-external::after { content:'公共休憩区'; position:absolute; right:28px; bottom:28px; width:142px; height:84px; display:grid; place-items:center; border:1px solid #5f8178; border-radius:18px 18px 5px 5px; background:#2b4640; color:#bcded4; font-size:9px; letter-spacing:.08em; writing-mode:initial; } #desktop-study-room .classroom-layout.room-external .classroom-windows { top:20px; right:auto; left:28px; grid-template-columns:repeat(4,33px); grid-template-rows:repeat(1,37px); box-shadow:24px 30px 62px rgba(255,213,123,.24); } #desktop-study-room .classroom-layout.room-external .classroom-windows i { background:#c2e1d2; box-shadow:inset 0 16px 0 rgba(255,244,204,.42); } #desktop-study-room .classroom-layout.room-external .classroom-ac { right:26px; } #desktop-study-room .classroom-layout.room-external .classroom-plant-one { right:34px; bottom:136px; transform:scale(1.45); } #desktop-study-room .classroom-layout.room-external .classroom-plant-two { left:36px; bottom:36px; transform:scale(1.15); } #desktop-study-room .classroom-layout.room-external.floor-1 .classroom-seats { grid-template-columns:repeat(3,minmax(100px,1fr)); gap:34px 46px; padding:112px 54px 122px; } #desktop-study-room .classroom-layout.room-external.floor-1 .classroom-booth:nth-child(3n+2) { transform:translateY(20px); } #desktop-study-room .classroom-layout.room-external.floor-1 .classroom-booth:nth-child(3n) { transform:translateY(-8px); } #desktop-study-room .classroom-layout.room-external.floor-2 .classroom-seats { grid-template-columns:repeat(4,minmax(86px,1fr)); gap:28px 34px; padding-top:94px; } #desktop-study-room .classroom-layout.room-external.floor-2::after { content:'阅读 · 休憩 · 补给'; width:186px; border-radius:5px; } #desktop-study-room .classroom-layout.room-external.floor-3 .classroom-seats { grid-template-columns:repeat(5,minmax(70px,1fr)); gap:24px 23px; padding:100px 34px 88px; } #desktop-study-room .classroom-layout.room-external.floor-3::after { content:'低声安静区'; width:128px; height:176px; border-radius:5px; writing-mode:vertical-rl; } @media (max-width:780px) { #desktop-study-room .classroom-layout.room-external .classroom-windows { left:16px; grid-template-columns:repeat(3,25px); } #desktop-study-room .classroom-layout.room-external::after { right:14px; bottom:20px; width:98px; height:60px; font-size:7px; } #desktop-study-room .classroom-layout.room-external.floor-1 .classroom-seats { grid-template-columns:repeat(2,minmax(94px,1fr)); padding:105px 28px 102px; } #desktop-study-room .classroom-layout.room-external.floor-2 .classroom-seats { grid-template-columns:repeat(3,minmax(72px,1fr)); } #desktop-study-room .classroom-layout.room-external.floor-3 .classroom-seats { grid-template-columns:repeat(3,minmax(66px,1fr)); } } /* Keep the writable blackboard to the side and give the admin podium its own centered lane. They used to share the same top-center stack and covered the first row of desks. */ #desktop-study-room .classroom-layout.room-school { position:relative; } #desktop-study-room .classroom-layout.room-school .classroom-campus-board { top:24px !important; right:24px !important; left:auto !important; width:min(250px,34%) !important; min-height:68px !important; transform:none !important; } #desktop-study-room .classroom-layout.room-school .classroom-podium { position:absolute !important; z-index:12 !important; top:108px !important; left:50% !important; width:min(190px,28%) !important; min-height:48px !important; margin:0 !important; transform:translateX(-50%) !important; } #desktop-study-room .classroom-layout.room-school .classroom-seats { padding-top:184px !important; } @media (max-width:780px) { #desktop-study-room .classroom-layout.room-school .classroom-campus-board { top:18px !important; right:14px !important; width:min(190px,43%) !important; } #desktop-study-room .classroom-layout.room-school .classroom-podium { top:96px !important; width:min(160px,42%) !important; } #desktop-study-room .classroom-layout.room-school .classroom-seats { padding-top:162px !important; } } #desktop-study-room .classroom-layout.room-school { background-color:#6e5743; background-image:repeating-linear-gradient(90deg,rgba(255,235,202,.08) 0 1px,transparent 1px 29px),repeating-linear-gradient(0deg,rgba(34,23,16,.15) 0 1px,transparent 1px 58px); } #desktop-study-room .classroom-layout.room-public { background-color:#4c5a57; background-image:linear-gradient(45deg,rgba(220,239,230,.045) 25%,transparent 25% 75%,rgba(220,239,230,.045) 75%),linear-gradient(-45deg,rgba(220,239,230,.035) 25%,transparent 25% 75%,rgba(220,239,230,.035) 75%); background-size:42px 42px; } #desktop-study-room .classroom-layout.room-external { background-color:#92755a; background-image:repeating-linear-gradient(90deg,rgba(255,235,202,.1) 0 1px,transparent 1px 31px),repeating-linear-gradient(0deg,rgba(67,43,27,.16) 0 1px,transparent 1px 62px); } #desktop-study-room .classroom-layout.room-cafe { background-color:#8f684a; background-image:repeating-linear-gradient(90deg,rgba(255,230,191,.1) 0 1px,transparent 1px 26px),repeating-linear-gradient(0deg,rgba(74,42,24,.13) 0 1px,transparent 1px 52px); } #desktop-study-room .classroom-layout.room-cafe { min-height:640px; background-color:#725644; background-image:repeating-linear-gradient(90deg,rgba(255,232,195,.09) 0 1px,transparent 1px 30px),repeating-linear-gradient(0deg,rgba(72,44,29,.15) 0 1px,transparent 1px 60px); box-shadow:inset 0 0 0 11px #463126,inset 0 0 0 13px #d6aa72,0 0 0 1px #553a2a; } #desktop-study-room .classroom-layout.room-cafe::after { z-index:8; top:25px; right:auto; bottom:auto; left:26px; width:142px; height:90px; min-height:0; padding:12px; border:3px solid #bf8e59; border-radius:2px; background:#294239; box-shadow:0 4px 0 #3d281e,0 10px 17px rgba(47,29,20,.24); color:#f1dbb0; font-size:7px; line-height:1.95; writing-mode:horizontal-tb; } #desktop-study-room .classroom-layout.room-cafe .classroom-board { display:none; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe { z-index:9; top:25px; right:27px; left:190px; min-height:90px; padding:14px 17px; border-color:#6b4532; background:#8d5b40; box-shadow:inset 0 3px 0 rgba(255,230,191,.23),0 6px 0 #4a2c20,0 13px 22px rgba(50,29,19,.28); } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe::before { content:'ESPRESSO BAR · HAND DRIP · CAKE'; top:13px; left:17px; color:#f7dfb8; font-size:8px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe span { right:auto; bottom:15px; left:17px; color:#f3cf91; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe b { right:17px; bottom:14px; transform:none; border-color:#b98857; background:#3e5e52; color:#f3e0be; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe i { top:39px; right:128px; width:23px; height:28px; border:3px solid #263633; border-radius:8px 8px 4px 4px; background:#4b7569; box-shadow:0 0 0 3px rgba(225,195,146,.1); } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe i::before { top:-12px; left:4px; width:11px; height:11px; border-color:#f0cb9f; background:#5c3b2c; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe i::after { top:7px; left:-14px; width:45px; border-top-color:#f1ca94; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe em { top:35px; right:48px; width:33px; height:29px; border-color:#313631; background:#b8c0b8; box-shadow:inset 0 5px 0 #747e76,0 16px 0 -9px #2e302d; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe u { top:17px; left:auto; right:178px; height:16px; background:#f5dbc0; box-shadow:18px 0 0 #f5dbc0; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe u::before { top:-6px; left:-3px; width:8px; height:8px; border:0; border-radius:50%; background:#fff0dd; box-shadow:18px 0 #fff0dd; } #desktop-study-room .classroom-layout.room-cafe .classroom-windows { display:grid; z-index:7; top:143px; right:27px; grid-template-columns:repeat(2,38px); grid-template-rows:repeat(3,38px); gap:4px; padding:6px; border-color:#e4c391; background:#41646a; box-shadow:0 4px 0 #4b2e22,0 10px 24px rgba(255,205,134,.18); } #desktop-study-room .classroom-layout.room-cafe .classroom-windows i { background:#9fc3bb; box-shadow:inset 0 16px 0 rgba(241,212,158,.2); } #desktop-study-room .classroom-layout.room-cafe .classroom-windows i:nth-child(2),#desktop-study-room .classroom-layout.room-cafe .classroom-windows i:nth-child(5) { background:#d7a96e; } #desktop-study-room .classroom-layout.room-cafe .classroom-seats { z-index:4; inset:146px 145px 30px 28px; grid-template-columns:repeat(4,minmax(74px,1fr)); grid-template-rows:repeat(4,minmax(54px,1fr)); gap:18px 18px; padding:0; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table,#desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table:nth-child(3n+1),#desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table:nth-child(3n+2) { width:76px; height:42px; min-height:0; align-self:center; justify-self:center; border:2px solid #9e7049; border-radius:4px; background:#ba8657; box-shadow:inset 0 2px 0 rgba(255,235,201,.3),0 5px 0 #68412a,0 9px 9px rgba(70,41,23,.22); transform:none; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table:nth-child(n) { grid-column:auto; grid-row:auto; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table:nth-child(2n) { background:#a97750; } #desktop-study-room .classroom-layout.room-cafe .classroom-plant-one { right:45px; bottom:38px; transform:scale(.95); } #desktop-study-room .classroom-layout.room-cafe .classroom-plant-two { left:26px; bottom:25px; transform:scale(.8); } #desktop-study-room .classroom-layout.room-cafe .classroom-seats::before,#desktop-study-room .classroom-layout.room-cafe .classroom-seats::after { position:absolute; z-index:-1; color:rgba(72,45,27,.72); font:700 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.13em; pointer-events:none; } #desktop-study-room .classroom-layout.room-cafe .classroom-seats::before { content:'WINDOW SEATS'; top:-14px; left:5px; } #desktop-study-room .classroom-layout.room-cafe .classroom-seats::after { content:'QUIET READING'; right:3px; bottom:-16px; } #desktop-study-room .classroom-layout.room-cafe .cafe-zone-window { width:86px; background:#c99462; border-color:#a87848; box-shadow:inset 0 2px 0 rgba(255,242,209,.42),0 5px 0 #68412a,0 9px 9px rgba(70,41,23,.22); } #desktop-study-room .classroom-layout.room-cafe .cafe-zone-window:nth-child(2n) { background:#b98657; } #desktop-study-room .classroom-layout.room-cafe .cafe-zone-shared { width:94px; min-height:48px; border-radius:50%; background:#a97247; border-color:#885535; box-shadow:inset 0 2px 0 rgba(255,226,180,.32),0 5px 0 #563322,0 10px 10px rgba(70,41,23,.22); } #desktop-study-room .classroom-layout.room-cafe .cafe-zone-quiet { width:72px; height:48px; border-radius:2px; background:#735f4b; border-color:#5b4637; box-shadow:inset 0 2px 0 rgba(255,242,217,.18),0 5px 0 #3f3026,0 9px 9px rgba(45,31,22,.25); } #desktop-study-room .classroom-layout.room-cafe .cafe-zone-bar { width:70px; height:34px; border-radius:16px 16px 4px 4px; background:#425f58; border-color:#2f4741; box-shadow:inset 0 2px 0 rgba(221,245,227,.24),0 5px 0 #263832,0 9px 9px rgba(41,29,20,.25); } #desktop-study-room .classroom-layout.room-cafe .cafe-zone-bar::before { bottom:-18px; width:18px; height:14px; border-radius:3px 3px 8px 8px; background:#364742; } @media (max-width:780px) { #desktop-study-room .classroom-layout.room-cafe { min-height:650px; } #desktop-study-room .classroom-layout.room-cafe::after { top:16px; right:auto; bottom:auto; left:16px; width:104px; height:62px; min-height:0; padding:8px; font-size:5px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe { left:134px; right:16px; min-height:71px; padding:10px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe::before { left:10px; font-size:6px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe i { right:82px; top:33px; transform:scale(.75); } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe em { right:25px; top:28px; transform:scale(.72); } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe u { display:none; } #desktop-study-room .classroom-layout.room-cafe .classroom-windows { top:125px; right:16px; grid-template-columns:repeat(2,24px); grid-template-rows:repeat(3,24px); gap:3px; padding:4px; } #desktop-study-room .classroom-layout.room-cafe .classroom-seats { inset:123px 91px 24px 16px; grid-template-columns:repeat(2,minmax(58px,1fr)); grid-template-rows:repeat(8,minmax(42px,1fr)); gap:11px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table,#desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table:nth-child(3n+1),#desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table:nth-child(3n+2) { width:58px; height:34px; } } #desktop-study-room .classroom-layout.room-external .classroom-podium { display:block; z-index:30; } #desktop-study-room .classroom-layout.room-external .classroom-seats { z-index:2; padding-top:150px !important; } #desktop-study-room .classroom-layout.room-external::after { z-index:1; } @media (max-width:780px) { #desktop-study-room .classroom-layout.room-external .classroom-seats { padding-top:120px !important; } } /* Keep decorative labels from competing with usable controls on compact layouts. */ #desktop-study-room .classroom-podium:disabled { display:none !important; } #desktop-study-room .classroom-layout.room-school .classroom-podium::after { display:none !important; } #desktop-study-room .classroom-campus-board { overflow:hidden; } #desktop-study-room .classroom-campus-board strong, #desktop-study-room .classroom-campus-board span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:68px; } #desktop-study-room .classroom-campus-board small { max-width:58px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media (max-width:780px) { #desktop-study-room .classroom-layout.room-school .classroom-campus-board { min-height:62px !important; padding:10px 12px !important; } #desktop-study-room .classroom-layout.room-school .classroom-campus-board strong { font-size:10px !important; padding-right:0; } #desktop-study-room .classroom-layout.room-school .classroom-campus-board span { margin-top:4px !important; padding-right:0; font-size:8px !important; } #desktop-study-room .classroom-layout.room-school .classroom-campus-board small { right:9px !important; bottom:5px !important; font-size:7px !important; } #desktop-study-room .classroom-layout.room-school .classroom-podium { top:94px !important; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table small { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #desktop-study-room .classroom-layout.room-cafe .cafe-pastry-case, #desktop-study-room .classroom-layout.room-cafe .cafe-succulent-rack { display:none !important; } } #desktop-study-room .classroom-layout.room-cafe { min-height:690px; background-color:#9a744f; background-image:linear-gradient(118deg,rgba(255,239,178,.34),transparent 33%),repeating-linear-gradient(90deg,rgba(255,240,207,.1) 0 1px,transparent 1px 30px),repeating-linear-gradient(0deg,rgba(82,49,29,.16) 0 1px,transparent 1px 60px); } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe { z-index:20; top:25px; right:28px; left:204px; min-height:86px; border-color:#5f3929; background:#6d4431; box-shadow:inset 0 3px 0 rgba(255,231,192,.22),0 7px 0 #3e241b,0 13px 22px rgba(49,28,18,.3); } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe::before { content:'ESPRESSO · FLAT WHITE · POUR OVER'; color:#f9e2b7; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe::after { content:''; right:15px; bottom:-28px; width:16px; height:14px; border:5px solid #4d2d21; border-top:0; border-radius:0 0 9px 9px; background:#bd8051; box-shadow:-31px 0 0 -5px #bd8051,-62px 0 0 -5px #bd8051,-93px 0 0 -5px #bd8051; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe span { bottom:13px; color:#ffe8ba; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe b { bottom:12px; color:#f8e6c6; background:#31564d; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe i { top:38px; right:116px; width:22px; height:28px; border-color:#2c3935; background:#426e62; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe i::before { content:''; top:-14px; left:4px; width:12px; height:12px; border:2px solid #f7cda1; border-radius:50%; background:#563b2b; box-shadow:0 17px 0 -2px #e2a77f; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe i::after { top:7px; left:-15px; width:49px; border-top-color:#f3d29e; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe em { top:34px; right:42px; width:38px; height:30px; border-color:#303431; background:#c3c9c2; box-shadow:inset 0 5px 0 #767e78,0 16px 0 -9px #2d302e; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe u { display:block; top:17px; right:168px; width:9px; height:16px; background:#f7dfbc; box-shadow:17px 0 0 #f7dfbc,34px 0 0 #f7dfbc; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe u::before { content:''; top:-6px; left:-3px; width:8px; height:8px; border:0; border-radius:50%; background:#fff1da; box-shadow:17px 0 #fff1da,34px 0 #fff1da; } #desktop-study-room .classroom-layout.room-cafe .classroom-windows { display:grid; z-index:12; top:139px; right:27px; grid-template-columns:repeat(2,42px); grid-template-rows:repeat(4,38px); border-color:#f0c987; background:#476d72; box-shadow:0 4px 0 #563022,0 12px 30px rgba(255,209,119,.48); } #desktop-study-room .classroom-layout.room-cafe .classroom-windows::after { content:'SUNNY WINDOW'; position:absolute; top:-16px; left:0; color:#6d452d; font:700 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; white-space:nowrap; } #desktop-study-room .classroom-layout.room-cafe .classroom-windows i { background:#a9d2ca; box-shadow:inset 0 15px 0 rgba(255,247,204,.46); } #desktop-study-room .classroom-layout.room-cafe .classroom-windows i:nth-child(2),#desktop-study-room .classroom-layout.room-cafe .classroom-windows i:nth-child(5) { background:#e8c175; } #desktop-study-room .classroom-layout.room-cafe .classroom-seats { z-index:8; inset:190px 155px 36px 174px; grid-template-columns:repeat(4,minmax(68px,1fr)); grid-template-rows:repeat(4,minmax(56px,1fr)); gap:19px 16px; } #desktop-study-room .classroom-layout.room-cafe .classroom-seats::before { content:'SUNLIT TABLES'; z-index:3; top:-17px; left:2px; color:#6d452d; } #desktop-study-room .classroom-layout.room-cafe .classroom-seats::after { content:'QUIET CORNER'; z-index:3; right:3px; bottom:-17px; color:#6d452d; } #desktop-study-room .classroom-layout.room-cafe .cafe-entry { position:absolute; z-index:14; top:137px; left:26px; width:110px; height:176px; border:5px solid #513629; border-bottom-width:9px; background:linear-gradient(90deg,rgba(255,239,200,.3) 0 48%,#315c5c 49% 100%); box-shadow:inset 0 0 0 2px rgba(255,238,198,.48),0 7px 0 rgba(68,38,25,.45); } #desktop-study-room .classroom-layout.room-cafe .cafe-entry::before { content:''; position:absolute; top:0; bottom:0; left:48%; width:4px; background:#56382a; box-shadow:0 44px 0 rgba(255,236,193,.48),0 88px 0 rgba(255,236,193,.48),0 132px 0 rgba(255,236,193,.48); } #desktop-study-room .classroom-layout.room-cafe .cafe-entry span { position:absolute; z-index:2; top:10px; left:50%; padding:3px 5px; border:1px solid #f0d89c; background:#33594f; color:#fff0c7; font:700 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.13em; transform:translateX(-50%); } #desktop-study-room .classroom-layout.room-cafe .cafe-entry i { position:absolute; right:12px; bottom:42px; width:8px; height:8px; border:2px solid #f0d39a; border-radius:50%; } #desktop-study-room .classroom-layout.room-cafe .cafe-succulent-rack { position:absolute; z-index:15; left:26px; bottom:38px; display:flex; align-items:end; gap:8px; width:118px; height:85px; padding:9px 8px; border:3px solid #65432f; border-radius:2px; background:repeating-linear-gradient(0deg,#9f6945 0 10px,#5c392a 10px 14px); box-shadow:0 5px 0 #44291f,0 9px 14px rgba(55,33,22,.25); } #desktop-study-room .classroom-layout.room-cafe .cafe-succulent-rack::before { content:'PLANT SHELF'; position:absolute; top:-15px; left:0; color:#63412c; font:700 6px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.11em; } #desktop-study-room .classroom-layout.room-cafe .cafe-succulent-rack i { position:relative; display:block; width:17px; height:17px; border-radius:50% 50% 45% 45%; background:#609763; box-shadow:inset 0 4px 0 rgba(214,243,173,.46); } #desktop-study-room .classroom-layout.room-cafe .cafe-succulent-rack i::after { content:''; position:absolute; bottom:-7px; left:2px; width:13px; height:8px; border-radius:2px 2px 5px 5px; background:#d1a06b; } #desktop-study-room .classroom-layout.room-cafe .cafe-succulent-rack i:nth-child(2n) { height:22px; background:#4e7f5b; } #desktop-study-room .classroom-layout.room-cafe .cafe-pastry-case { position:absolute; z-index:16; top:126px; left:184px; width:172px; height:42px; padding:7px 9px; border:3px solid #6b4530; border-radius:3px; background:linear-gradient(135deg,rgba(236,249,235,.48),rgba(125,170,164,.18)),#9dc1b9; box-shadow:inset 0 0 0 2px rgba(255,244,210,.44),0 5px 0 #503125,0 9px 13px rgba(66,38,24,.22); } #desktop-study-room .classroom-layout.room-cafe .cafe-pastry-case span { position:absolute; top:-15px; left:0; color:#633e2d; font:700 6px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.09em; white-space:nowrap; } #desktop-study-room .classroom-layout.room-cafe .cafe-pastry-case i { position:relative; display:inline-block; width:29px; height:13px; margin:13px 8px 0 0; border-radius:50% 50% 38% 38%; background:#d89a58; box-shadow:inset 0 3px 0 rgba(255,229,161,.55); } #desktop-study-room .classroom-layout.room-cafe .cafe-pastry-case i:nth-child(3) { background:#bd7041; } #desktop-study-room .classroom-layout.room-cafe .cafe-pastry-case i:nth-child(4) { background:#e8c777; } #desktop-study-room .classroom-layout.room-cafe .classroom-plant-one { right:32px; bottom:35px; transform:scale(1.16); } #desktop-study-room .classroom-layout.room-cafe .classroom-plant-two { display:none; } @media (max-width:780px) { #desktop-study-room .classroom-layout.room-cafe { min-height:700px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe { left:144px; right:16px; min-height:72px; padding:10px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe::before { font-size:6px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe i { right:78px; top:30px; transform:scale(.7); } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe em { right:18px; top:26px; transform:scale(.68); } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe u { display:none; } #desktop-study-room .classroom-layout.room-cafe .cafe-entry { top:124px; left:16px; width:93px; height:142px; } #desktop-study-room .classroom-layout.room-cafe .cafe-pastry-case { top:121px; left:126px; width:126px; height:35px; } #desktop-study-room .classroom-layout.room-cafe .cafe-pastry-case i { width:20px; margin-right:5px; } #desktop-study-room .classroom-layout.room-cafe .classroom-windows { top:171px; right:16px; grid-template-columns:repeat(2,25px); grid-template-rows:repeat(4,26px); } #desktop-study-room .classroom-layout.room-cafe .classroom-seats { inset:310px 16px 28px; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(34px,1fr)); gap:10px; } #desktop-study-room .classroom-layout.room-cafe .cafe-succulent-rack { left:16px; bottom:27px; width:84px; height:74px; gap:5px; } #desktop-study-room .classroom-layout.room-cafe .cafe-succulent-rack i { width:13px; height:14px; } #desktop-study-room .classroom-layout.room-cafe .classroom-plant-one { right:17px; bottom:20px; transform:scale(.75); } } @media (min-width:781px) { #desktop-study-room .classroom-layout.room-cafe .classroom-seats { grid-template-columns:repeat(4,minmax(68px,1fr)); grid-template-rows:repeat(5,minmax(54px,1fr)); gap:28px 22px; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-1 { grid-column:1; grid-row:1; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-2 { grid-column:2; grid-row:1; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-3 { grid-column:3; grid-row:1; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-4 { grid-column:4; grid-row:1; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-5 { grid-column:1; grid-row:2; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-6 { grid-column:2; grid-row:2; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-7 { grid-column:3; grid-row:2; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-8 { grid-column:1; grid-row:3; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-9 { grid-column:2; grid-row:3; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-10 { grid-column:3; grid-row:3; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-11 { grid-column:4; grid-row:2; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-12 { grid-column:4; grid-row:3; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-13 { grid-column:4; grid-row:4; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-14 { grid-column:3; grid-row:4; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-15 { grid-column:1 / span 2; grid-row:5; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-16 { grid-column:3 / span 2; grid-row:5; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-1::before,#desktop-study-room .classroom-layout.room-cafe .cafe-table-7::before,#desktop-study-room .classroom-layout.room-cafe .cafe-table-15::before { position:absolute; top:-18px; left:50%; color:#70462f; font:700 6px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.1em; white-space:nowrap; transform:translateX(-50%); } #desktop-study-room .classroom-layout.room-cafe .cafe-table-1::before { content:'WINDOW'; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-7::before { content:'SHARED'; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-15::before { content:'QUIET'; } #desktop-study-room .classroom-layout.room-cafe .cafe-zone-bar { width:88px; } } #desktop-study-room .classroom-layout.room-external .classroom-seats { position:absolute !important; inset:18px 18px 18px !important; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:1fr; gap:0; min-height:0; padding:0 !important; } #desktop-study-room .classroom-layout.room-external .classroom-podium { display:none !important; } #desktop-study-room .classroom-layout.room-external .classroom-seats::before,#desktop-study-room .classroom-layout.room-external .classroom-seats::after { display:none; } #desktop-study-room .classroom-layout.room-external::after { display:none; } #desktop-study-room .urban-room { position:relative; display:flex; min-width:0; min-height:0; flex-direction:column; padding:18px 22px 18px; background:transparent; } #desktop-study-room .urban-quiet { border-right:8px solid #c79662; box-shadow:7px 0 0 rgba(55,32,19,.42),inset -1px 0 0 rgba(255,226,181,.55); } #desktop-study-room .urban-quiet::after { position:absolute; z-index:4; top:50%; right:-14px; width:20px; height:64px; border:4px solid #704526; border-right:0; border-radius:20px 0 0 20px; background:#855838; box-shadow:inset 3px 0 0 rgba(255,213,159,.26),4px 0 0 rgba(55,32,19,.42); content:''; transform:translateY(-50%); } #desktop-study-room .urban-room header { position:relative; z-index:1; display:flex; align-items:baseline; gap:9px; padding:0 0 10px; color:#f3d0a4; } #desktop-study-room .urban-room header strong { font-size:14px; letter-spacing:.04em; } #desktop-study-room .urban-room header small { color:#c8a889; font-size:10px; } #desktop-study-room .urban-seat-grid { position:relative; z-index:1; display:grid; flex:1; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(6,minmax(42px,1fr)); align-content:stretch; gap:14px 18px; padding:20px 10px 7px; } #desktop-study-room .urban-room .classroom-booth { min-width:0; min-height:54px; } #desktop-study-room .urban-cafe { background:linear-gradient(135deg,rgba(255,212,143,.13),transparent 55%); } #desktop-study-room .urban-cafe header { color:#ffe2b8; } #desktop-study-room .urban-cafe header span { color:#e7bd7c; } #desktop-study-room .urban-cafe-seat { border-color:#bc8957 !important; border-top-color:#dfae71 !important; background:#8a5d3b !important; } #desktop-study-room .urban-cafe-seat:nth-child(3n+2) { border-radius:50% !important; background:#9b6840 !important; } #desktop-study-room .classroom-urban-zones { display:flex; align-items:center; gap:8px; margin:10px 0 2px; padding:9px 10px; border:1px solid #d8e3df; border-radius:12px; background:#f6faf8; } #desktop-study-room .classroom-urban-zones[hidden] { display:none; } #desktop-study-room .classroom-urban-zones > span { margin-right:2px; color:#77857e; font-size:12px; font-weight:700; } #desktop-study-room .classroom-urban-zones button { display:flex; align-items:baseline; gap:7px; min-height:32px; padding:6px 11px; border:1px solid transparent; border-radius:8px; background:transparent; color:#5d6b65; font:700 13px/1 inherit; cursor:pointer; } #desktop-study-room .classroom-urban-zones button small { color:#9aa69f; font-size:10px; font-weight:600; } #desktop-study-room .classroom-urban-zones button.active { border-color:#8fb6aa; background:#e5f1ec; color:#245c4d; box-shadow:0 1px 2px rgba(38,80,66,.08); } #desktop-study-room .classroom-urban-zones button.active small { color:#46806e; } #desktop-study-room .classroom-layout.room-cafe { min-height:620px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe { top:24px; right:28px; left:205px; min-height:80px; } #desktop-study-room .classroom-layout.room-cafe .cafe-entry { top:145px; left:26px; width:106px; height:156px; } #desktop-study-room .classroom-layout.room-cafe .cafe-pastry-case { top:145px; left:164px; width:154px; } #desktop-study-room .classroom-layout.room-cafe .classroom-windows { top:144px; right:30px; } #desktop-study-room .classroom-layout.room-cafe .classroom-seats { inset:235px 142px 82px 154px; grid-template-columns:repeat(4,minmax(60px,1fr)); grid-template-rows:repeat(4,minmax(48px,1fr)); gap:23px 16px; } #desktop-study-room .classroom-layout.room-cafe .cafe-succulent-rack { left:26px; bottom:30px; } #desktop-study-room .classroom-layout.room-cafe .classroom-plant-one { right:28px; bottom:28px; } #desktop-study-room .classroom-layout.room-cafe .classroom-seats::before { content:'窗边安静桌 · 共享长桌'; } #desktop-study-room .classroom-layout.room-cafe .classroom-seats::after { content:'沉浸角 · 吧台位'; } @media (max-width:780px) { #desktop-study-room .classroom-layout.room-external { min-height:720px; } #desktop-study-room .classroom-layout.room-external .classroom-seats { inset:16px 12px 16px !important; grid-template-columns:1fr; grid-template-rows:repeat(2,minmax(0,1fr)); gap:0; min-height:0; padding:0 !important; } #desktop-study-room .urban-room { padding:14px 16px; } #desktop-study-room .urban-seat-grid { gap:16px 14px; padding:14px 6px 3px; } #desktop-study-room .urban-quiet { border-right:0; border-bottom:8px solid #c79662; box-shadow:0 7px 0 rgba(55,32,19,.42),inset 0 -1px 0 rgba(255,226,181,.55); } #desktop-study-room .urban-quiet::after { top:auto; right:50%; bottom:-14px; width:64px; height:20px; border:4px solid #704526; border-bottom:0; border-radius:20px 20px 0 0; transform:translateX(50%); } #desktop-study-room .urban-seat-grid { gap:18px 14px; } #desktop-study-room .classroom-urban-zones { flex-wrap:wrap; gap:6px; } #desktop-study-room .classroom-urban-zones > span { width:100%; } #desktop-study-room .classroom-urban-zones button { flex:1 1 130px; justify-content:space-between; } #desktop-study-room .classroom-layout.room-cafe { min-height:690px; } #desktop-study-room .classroom-layout.room-cafe .cafe-entry { top:132px; left:16px; width:88px; height:136px; } #desktop-study-room .classroom-layout.room-cafe .cafe-pastry-case { top:132px; left:120px; width:128px; } #desktop-study-room .classroom-layout.room-cafe .classroom-windows { top:168px; right:16px; } #desktop-study-room .classroom-layout.room-cafe .classroom-seats { inset:300px 16px 34px; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(36px,1fr)); gap:12px; } } @media (min-width:781px) { #desktop-study-room .classroom-layout.room-cafe .classroom-seats { grid-template-columns:repeat(6,minmax(54px,1fr)); grid-template-rows:repeat(4,minmax(58px,1fr)); gap:29px 13px; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table { grid-column:auto; grid-row:auto; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-1 { grid-column:1; grid-row:1; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-2 { grid-column:2; grid-row:1; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-3 { grid-column:3; grid-row:1; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-4 { grid-column:4; grid-row:1; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-5 { grid-column:5; grid-row:1; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-6 { grid-column:6; grid-row:1; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-7 { grid-column:1; grid-row:2; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-8 { grid-column:2; grid-row:2; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-9 { grid-column:3; grid-row:2; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-10 { grid-column:4; grid-row:2; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-11 { grid-column:1; grid-row:3; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-12 { grid-column:2; grid-row:3; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-13 { grid-column:3; grid-row:3; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-14 { grid-column:4; grid-row:3; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-15 { grid-column:5; grid-row:2; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-16 { grid-column:6; grid-row:2; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-17 { grid-column:5; grid-row:3; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-18 { grid-column:6; grid-row:3; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-19 { grid-column:5; grid-row:4; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-20 { grid-column:6; grid-row:4; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-21 { grid-column:1; grid-row:4; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-22 { grid-column:2; grid-row:4; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-23 { grid-column:3; grid-row:4; } #desktop-study-room .classroom-layout.room-cafe .cafe-table-24 { grid-column:4; grid-row:4; } #desktop-study-room .classroom-layout.room-cafe .cafe-zone-window { width:69px; } #desktop-study-room .classroom-layout.room-cafe .cafe-zone-shared { width:78px; } #desktop-study-room .classroom-layout.room-cafe .cafe-zone-quiet { width:62px; } #desktop-study-room .classroom-layout.room-cafe .cafe-zone-bar { width:67px; } } @media (min-width:781px) { #desktop-study-room .classroom-layout.room-cafe .classroom-seats { display:grid !important; grid-template-columns:repeat(6,minmax(54px,1fr)) !important; grid-template-rows:repeat(4,minmax(58px,1fr)) !important; gap:29px 13px !important; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table,#desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table:nth-child(n) { position:relative !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important; display:grid !important; transform:none !important; } } @media (max-width:780px) { #desktop-study-room .classroom-layout.room-cafe .classroom-seats { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; grid-template-rows:repeat(8,minmax(38px,1fr)) !important; gap:12px !important; } #desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table,#desktop-study-room .classroom-layout.room-cafe .classroom-cafe-table:nth-child(n) { position:relative !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important; transform:none !important; } } #desktop-study-room .classroom-layout.room-external .classroom-seats { position:absolute !important; inset:18px !important; z-index:20 !important; display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; grid-template-rows:minmax(0,1fr) !important; gap:0 !important; min-height:0 !important; padding:0 !important; } #desktop-study-room .classroom-layout.room-external .urban-room { display:flex !important; min-width:0 !important; min-height:0 !important; padding:22px !important; } #desktop-study-room .classroom-layout.room-external .urban-quiet { border-right:8px solid #c79662 !important; border-bottom:0 !important; } #desktop-study-room .classroom-layout.room-external .urban-seat-grid { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; grid-template-rows:repeat(6,minmax(0,1fr)) !important; flex:1 1 auto !important; min-height:0 !important; gap:15px 18px !important; padding:20px 10px 4px !important; } #desktop-study-room .classroom-layout.room-external .urban-room .classroom-booth { width:auto !important; height:auto !important; min-height:0 !important; transform:none !important; } #desktop-study-room .classroom-layout.room-external .urban-cafe .urban-seat-grid { grid-template-rows:repeat(4,minmax(0,1fr)) !important; gap:25px 26px !important; padding:20px 20px 68px !important; } #desktop-study-room .classroom-layout.room-external .urban-cafe::before { position:absolute; z-index:2; right:22px; bottom:14px; left:22px; height:36px; border:3px solid #5b3723; border-radius:5px; background:linear-gradient(180deg,#c78a52 0 25%,#79472b 26% 100%); box-shadow:inset 0 4px 0 rgba(255,229,184,.35),0 5px 0 #432418; color:#ffe1b0; content:'COFFEE BAR · 取餐区'; font:700 9px/36px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.13em; text-align:center; } #desktop-study-room .classroom-layout.room-external .urban-cafe-seat { border:3px solid #8d5734 !important; border-top:5px solid #d7a16a !important; border-radius:50% !important; background:radial-gradient(circle at 35% 28%,#dfb07a 0 8%,#b87946 9% 50%,#754426 51% 100%) !important; box-shadow:inset 0 3px 0 rgba(255,234,195,.35),0 7px 0 #4c2a19,0 11px 12px rgba(46,25,14,.3) !important; } #desktop-study-room .classroom-layout.room-external .urban-cafe-seat::before,#desktop-study-room .classroom-layout.room-external .urban-cafe-seat::after { display:none !important; } #desktop-study-room .classroom-layout.room-external .urban-cafe-seat small { color:#fff0d7 !important; } #desktop-study-room .classroom-layout.room-external .urban-cafe { background:linear-gradient(135deg,rgba(255,218,153,.12),transparent 45%),repeating-linear-gradient(90deg,rgba(255,239,199,.08) 0 1px,transparent 1px 42px),#4e3325 !important; } #desktop-study-room .classroom-layout.room-external .urban-cafe .urban-seat-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; grid-template-rows:repeat(3,minmax(0,1fr)) !important; gap:16px 14px !important; padding:54px 26px 78px !important; } #desktop-study-room .classroom-layout.room-external .urban-cafe-seat { align-self:center !important; justify-self:center !important; width:54px !important; height:38px !important; min-height:38px !important; padding:3px !important; border-width:2px !important; border-top-width:4px !important; border-radius:6px !important; background:linear-gradient(135deg,#d7a16a 0 14%,#a8673a 15% 82%,#6c3c22 83%) !important; box-shadow:inset 0 2px 0 rgba(255,236,199,.42),0 5px 0 #4b2818,0 8px 9px rgba(34,17,9,.3) !important; } #desktop-study-room .classroom-layout.room-external .urban-cafe-seat:nth-child(3n+2) { width:42px !important; height:42px !important; min-height:42px !important; border-radius:50% !important; } #desktop-study-room .classroom-layout.room-external .urban-cafe-seat:nth-child(4n) { transform:translateY(9px) !important; } #desktop-study-room .classroom-layout.room-external .urban-cafe-seat b { top:3px !important; left:5px !important; font-size:6px !important; } #desktop-study-room .classroom-layout.room-external .urban-cafe-seat small { margin-top:12px !important; font-size:6px !important; } #desktop-study-room .classroom-layout.room-external .urban-cafe::after { position:absolute; z-index:2; top:62px; right:25px; width:104px; height:38px; border:4px solid #69432c; background:linear-gradient(90deg,#9fc5bf 0 31%,#5c8581 32% 34%,#a7d0c8 35% 65%,#5c8581 66% 68%,#9fc5bf 69%); box-shadow:inset 0 10px 0 rgba(255,243,193,.32),0 4px 0 #3f2719; content:''; } #desktop-study-room .classroom-layout.room-external .urban-cafe header::after { position:absolute; right:0; bottom:-49px; width:58px; height:24px; border:3px solid #3b3933; border-radius:4px; background:linear-gradient(90deg,#a8afa9 0 42%,#535b57 43% 48%,#a8afa9 49%); box-shadow:0 9px 0 -4px #252a27,70px 0 0 -7px #e2b16b,70px 8px 0 -5px #5b3523; color:#fff0d0; content:'ESP'; font:700 7px/24px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.1em; text-align:center; } #desktop-study-room .classroom-layout.room-public { min-height:640px; overflow:hidden; background:linear-gradient(135deg,rgba(255,255,255,.76),rgba(224,237,230,.74)),repeating-linear-gradient(90deg,rgba(52,81,72,.08) 0 1px,transparent 1px 48px),#d4e2da; box-shadow:inset 0 0 0 11px #58766a,inset 0 0 0 14px #eff6f1,0 0 0 1px #2e4a40; } #desktop-study-room .classroom-layout.room-public::before { opacity:1; background:radial-gradient(circle at 8% 12%,rgba(255,253,230,.88),transparent 24%),radial-gradient(circle at 74% 20%,rgba(255,252,225,.62),transparent 25%); } #desktop-study-room .classroom-layout.room-public::after { position:absolute; z-index:3; right:28px; bottom:30px; width:152px; height:104px; border:2px solid #719083; border-radius:18px 18px 4px 4px; background:linear-gradient(135deg,rgba(226,245,235,.78),rgba(135,176,157,.68)); box-shadow:inset 0 0 0 8px rgba(255,255,255,.25),0 7px 0 rgba(56,91,76,.26); color:#365d4f; content:'阅读休憩角'; font:700 10px/104px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; text-align:center; } #desktop-study-room .classroom-layout.room-public .classroom-podium { display:none !important; } #desktop-study-room .classroom-layout.room-public .classroom-board { top:26px; right:210px; left:28px; z-index:9; display:block; min-height:63px; border:3px solid #4d6a5e; border-radius:8px; background:#426658; box-shadow:inset 0 3px 0 rgba(221,244,230,.17),0 6px 0 #2e493e,0 10px 18px rgba(31,70,56,.2); } #desktop-study-room .classroom-layout.room-public .classroom-board::after { color:#e8f6ed; content:'公共静音自习区 · 请保持安静'; font-size:11px; letter-spacing:.16em; } #desktop-study-room .classroom-layout.room-public .classroom-windows { top:28px; right:28px; z-index:9; grid-template-columns:repeat(3,34px); grid-template-rows:38px; border-color:#8aac9d; background:#5f897f; box-shadow:0 4px 0 #4c6f64,0 12px 24px rgba(125,183,153,.24); } #desktop-study-room .classroom-layout.room-public .classroom-windows i { background:#c9e8db; box-shadow:inset 0 15px 0 rgba(255,248,207,.5); } #desktop-study-room .classroom-layout.room-public .classroom-ac { display:none; } #desktop-study-room .classroom-layout.room-public .classroom-seats { z-index:5; inset:126px 212px 52px 42px; display:grid; grid-template-columns:repeat(4,minmax(92px,1fr)); grid-template-rows:repeat(5,minmax(58px,1fr)); gap:26px 28px; padding:0; filter:none; } #desktop-study-room .classroom-layout.room-public .classroom-desk { width:100%; min-height:54px; border:2px solid #789889; border-radius:7px; background:linear-gradient(180deg,#d7e9dd 0 13%,#aacbbb 14% 83%,#6b8d7f 84%); box-shadow:inset 0 3px 0 rgba(255,255,255,.52),0 6px 0 #46675b,0 11px 12px rgba(49,79,66,.18); } #desktop-study-room .classroom-layout.room-public .classroom-desk:nth-child(3n+2) { transform:translateY(12px); } #desktop-study-room .classroom-layout.room-public .classroom-seat { border-color:#5e8274; background:#edf7f0; box-shadow:inset 0 2px 0 #fff,0 3px 0 #477064; color:#31564b; } #desktop-study-room .classroom-layout.room-public .classroom-seat small,#desktop-study-room .classroom-layout.room-public .classroom-seat b { color:#456b5c; } #desktop-study-room .classroom-layout.room-public .classroom-seat.is-mine { border-color:#35a88e; background:#d4f2e6; box-shadow:0 0 0 2px rgba(53,168,142,.16),inset 0 2px 0 #fff,0 3px 0 #247560; } #desktop-study-room .classroom-layout.room-public .classroom-plant-one { right:70px; bottom:160px; z-index:7; transform:scale(1.2); } #desktop-study-room .classroom-layout.room-public .classroom-plant-two { right:160px; bottom:48px; left:auto; z-index:7; transform:scale(.78); } #desktop-study-room .classroom-layout.room-public .classroom-legend { z-index:9; right:30px; bottom:36px; border-color:#8aab9c; background:rgba(237,248,241,.85); color:#42675a; box-shadow:0 5px 12px rgba(48,78,65,.14); } @media (max-width:780px) { #desktop-study-room .classroom-layout.room-public { min-height:740px; } #desktop-study-room .classroom-layout.room-public .classroom-board { right:16px; left:16px; min-height:54px; } #desktop-study-room .classroom-layout.room-public .classroom-windows { top:102px; right:16px; grid-template-columns:repeat(3,23px); grid-template-rows:28px; } #desktop-study-room .classroom-layout.room-public .classroom-seats { inset:152px 16px 126px; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(6,minmax(52px,1fr)); gap:19px 14px; } #desktop-study-room .classroom-layout.room-public::after { right:16px; bottom:18px; width:118px; height:74px; font-size:8px; line-height:74px; } #desktop-study-room .classroom-layout.room-public .classroom-plant-one { right:29px; bottom:113px; transform:scale(.76); } #desktop-study-room .classroom-layout.room-public .classroom-plant-two { display:none; } } #desktop-study-room .classroom-layout.room-public .classroom-board::after { content:'今天也一起慢慢读 · 找到喜欢的位置坐下吧'; } #desktop-study-room .classroom-layout.room-public .classroom-seats::before { position:absolute; z-index:6; top:-34px; left:2px; padding:6px 9px; border:1px solid #a6c7b7; border-radius:999px; background:rgba(247,253,249,.82); color:#507665; content:'☀ 晨光靠窗位'; font:700 10px/1 system-ui,sans-serif; box-shadow:0 3px 8px rgba(54,91,73,.12); } #desktop-study-room .classroom-layout.room-public .classroom-seats::after { position:absolute; z-index:6; right:1px; bottom:-32px; padding:6px 9px; border:1px solid #c5ad7a; border-radius:999px; background:rgba(255,249,232,.86); color:#8c6b32; content:'✦ 今日推荐：从 25 分钟开始'; font:700 10px/1 system-ui,sans-serif; box-shadow:0 3px 8px rgba(91,70,32,.12); } #desktop-study-room .classroom-layout.room-public .public-table-1,#desktop-study-room .classroom-layout.room-public .public-table-2,#desktop-study-room .classroom-layout.room-public .public-table-3,#desktop-study-room .classroom-layout.room-public .public-table-4 { border-color:#d1ae66; background:linear-gradient(180deg,#fff0c4 0 13%,#e5c577 14% 83%,#aa8541 84%); box-shadow:inset 0 3px 0 rgba(255,255,255,.62),0 6px 0 #8d6b32,0 11px 12px rgba(102,74,25,.18); } #desktop-study-room .classroom-layout.room-public .public-table-1::before,#desktop-study-room .classroom-layout.room-public .public-table-3::before { position:absolute; top:-22px; left:50%; padding:3px 6px; border-radius:999px; background:#f9df91; color:#795b22; content:'晨光位'; font:700 7px/1 system-ui,sans-serif; transform:translateX(-50%); } #desktop-study-room .classroom-layout.room-public .public-table-5,#desktop-study-room .classroom-layout.room-public .public-table-6,#desktop-study-room .classroom-layout.room-public .public-table-9,#desktop-study-room .classroom-layout.room-public .public-table-10 { border-color:#6b9d83; background:linear-gradient(180deg,#d9f0df 0 13%,#9ac9ac 14% 83%,#5d8b72 84%); } #desktop-study-room .classroom-layout.room-public .public-table-5::after,#desktop-study-room .classroom-layout.room-public .public-table-10::after { position:absolute; top:-25px; left:50%; width:22px; height:15px; border-radius:50% 50% 42% 42%; background:#5aa06d; box-shadow:inset 0 4px 0 rgba(223,249,188,.42); content:''; transform:translateX(-50%); } #desktop-study-room .classroom-layout.room-public .public-table-13,#desktop-study-room .classroom-layout.room-public .public-table-14,#desktop-study-room .classroom-layout.room-public .public-table-15 { border-color:#8397b7; background:linear-gradient(180deg,#e4eaf4 0 13%,#b7c9e1 14% 83%,#768cad 84%); } #desktop-study-room .classroom-layout.room-public .public-table-16,#desktop-study-room .classroom-layout.room-public .public-table-17,#desktop-study-room .classroom-layout.room-public .public-table-18 { border-color:#bd956c; background:linear-gradient(180deg,#f6e2c8 0 13%,#d9b589 14% 83%,#9f7650 84%); } #desktop-study-room .classroom-layout.room-public .public-table-16::before { position:absolute; top:-23px; left:50%; color:#9a7047; content:'安静角'; font:700 8px/1 system-ui,sans-serif; transform:translateX(-50%); } #desktop-study-room .classroom-layout.room-public .classroom-plant-two::after { position:absolute; right:-50px; bottom:0; width:38px; height:58px; border:3px solid #876846; border-radius:3px; background:repeating-linear-gradient(0deg,#c59963 0 9px,#815d3b 9px 12px); box-shadow:0 5px 0 #5f432d; color:#fff1cf; content:'BOOK'; font:700 6px/58px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; text-align:center; } @media (max-width:780px) { #desktop-study-room .classroom-layout.room-public .classroom-seats::before { top:-30px; font-size:8px; } #desktop-study-room .classroom-layout.room-public .classroom-seats::after { right:0; bottom:-29px; font-size:8px; } #desktop-study-room .classroom-layout.room-public .public-table-1::before,#desktop-study-room .classroom-layout.room-public .public-table-3::before,#desktop-study-room .classroom-layout.room-public .public-table-16::before { display:none; } } #desktop-study-room .classroom-layout.room-public .classroom-seats { grid-template-columns:repeat(4,minmax(92px,1fr)) !important; grid-template-rows:repeat(5,minmax(58px,1fr)) !important; gap:24px 26px !important; } #desktop-study-room .classroom-layout.room-public .classroom-desk,#desktop-study-room .classroom-layout.room-public .public-table-1,#desktop-study-room .classroom-layout.room-public .public-table-2,#desktop-study-room .classroom-layout.room-public .public-table-3,#desktop-study-room .classroom-layout.room-public .public-table-4,#desktop-study-room .classroom-layout.room-public .public-table-5,#desktop-study-room .classroom-layout.room-public .public-table-6,#desktop-study-room .classroom-layout.room-public .public-table-9,#desktop-study-room .classroom-layout.room-public .public-table-10,#desktop-study-room .classroom-layout.room-public .public-table-13,#desktop-study-room .classroom-layout.room-public .public-table-14,#desktop-study-room .classroom-layout.room-public .public-table-15,#desktop-study-room .classroom-layout.room-public .public-table-16,#desktop-study-room .classroom-layout.room-public .public-table-17,#desktop-study-room .classroom-layout.room-public .public-table-18 { transform:none !important; border-color:#789889 !important; background:linear-gradient(180deg,#dbeade 0 13%,#b4d0c0 14% 83%,#6f9081 84%) !important; box-shadow:inset 0 3px 0 rgba(255,255,255,.52),0 6px 0 #4d6d60,0 10px 11px rgba(49,79,66,.14) !important; } #desktop-study-room .classroom-layout.room-public .classroom-desk::before,#desktop-study-room .classroom-layout.room-public .classroom-desk::after { display:none !important; } #desktop-study-room .classroom-layout.room-public .classroom-seats::before { content:'公共静音自习区'; border-color:#a6c7b7; background:rgba(247,253,249,.88); color:#507665; } #desktop-study-room .classroom-layout.room-public .classroom-seats::after { display:none; } @media (max-width:780px) { #desktop-study-room .classroom-layout.room-public .classroom-seats { grid-template-columns:repeat(3,minmax(0,1fr)) !important; grid-template-rows:repeat(6,minmax(52px,1fr)) !important; gap:19px 14px !important; } } #desktop-study-room .classroom-layout.room-public .classroom-seats { inset:132px 220px 54px 120px !important; gap:34px 42px !important; } #desktop-study-room .classroom-layout.room-public .classroom-desk { width:74% !important; min-height:46px !important; justify-self:center; align-self:center; } #desktop-study-room .classroom-layout.room-public .classroom-seat { min-width:0; transform:scale(.88); } #desktop-study-room .classroom-layout.room-public .public-room-decor { position:absolute; z-index:8; inset:0; pointer-events:none; } #desktop-study-room .classroom-layout.room-public .public-window { position:absolute; top:145px; width:48px; height:156px; border:5px solid #527567; background:linear-gradient(90deg,#bde0d4 0 45%,#6b978a 46% 54%,#bde0d4 55%); box-shadow:inset 0 26px 0 rgba(255,248,210,.42),0 5px 0 #38584d,0 10px 18px rgba(42,76,63,.17); } #desktop-study-room .classroom-layout.room-public .public-window::before { position:absolute; top:-18px; left:-5px; width:48px; color:#527567; content:'SUNLIGHT'; font:700 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; } #desktop-study-room .classroom-layout.room-public .public-window-left { left:28px; } #desktop-study-room .classroom-layout.room-public .public-window-right { right:28px; } #desktop-study-room .classroom-layout.room-public .public-book-shelf { position:absolute; bottom:32px; left:30px; width:62px; height:102px; border:3px solid #6e553a; border-radius:3px; background:repeating-linear-gradient(0deg,#b98d5c 0 18px,#68482f 18px 22px); box-shadow:inset 0 0 0 2px rgba(255,231,187,.3),0 5px 0 #493020; } #desktop-study-room .classroom-layout.room-public .public-book-shelf::before { position:absolute; top:-16px; left:0; color:#6b5138; content:'共享书架'; font:700 8px/1 system-ui,sans-serif; white-space:nowrap; } #desktop-study-room .classroom-layout.room-public .public-book-shelf::after { position:absolute; top:5px; right:7px; bottom:5px; left:7px; background:repeating-linear-gradient(90deg,#e6d08c 0 5px,#6986a3 5px 10px,#b56d61 10px 15px,#7c9b74 15px 20px); content:''; } @media (max-width:780px) { #desktop-study-room .classroom-layout.room-public .classroom-seats { inset:156px 82px 126px 82px !important; gap:28px 22px !important; } #desktop-study-room .classroom-layout.room-public .classroom-desk { width:80% !important; min-height:42px !important; } #desktop-study-room .classroom-layout.room-public .public-window { top:132px; width:34px; height:108px; } #desktop-study-room .classroom-layout.room-public .public-window-left { left:16px; } #desktop-study-room .classroom-layout.room-public .public-window-right { right:16px; } #desktop-study-room .classroom-layout.room-public .public-book-shelf { display:none; } } #desktop-study-room .classroom-panel { border-radius:16px; } #desktop-study-room .classroom-room-switch { align-items:center; gap:8px; margin:18px 0 10px; } #desktop-study-room .classroom-room-switch button { min-height:34px; padding:0 14px; border-radius:9px; font-size:12px; transition:background .18s ease,border-color .18s ease,transform .18s ease; } #desktop-study-room .classroom-room-switch button.active { box-shadow:0 5px 13px rgba(77,192,168,.12); } #desktop-study-room .classroom-room-switch button:hover { transform:translateY(-1px); } #desktop-study-room .classroom-school-picker,#desktop-study-room .classroom-floor-picker,#desktop-study-room .classroom-name-picker { height:34px; border-radius:9px; font-size:11px; } #desktop-study-room .study-room-guide { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin:0 0 14px; overflow:hidden; border:1px solid #2c4640; border-radius:12px; background:#2c4640; box-shadow:0 8px 18px rgba(5,19,16,.15); } #desktop-study-room .study-room-guide > div { display:grid; grid-template-columns:20px 1fr; gap:3px 7px; min-height:52px; padding:10px 12px; background:#14221f; } #desktop-study-room .study-room-guide i { grid-row:span 2; display:grid; width:19px; height:19px; place-items:center; border-radius:50%; background:#2c685c; color:#dff8ef; font:800 10px/1 system-ui,sans-serif; font-style:normal; } #desktop-study-room .study-room-guide span { align-self:end; color:#7f9c93; font-size:10px; } #desktop-study-room .study-room-guide b { overflow:hidden; color:#d8eee6; font-size:11px; text-overflow:ellipsis; white-space:nowrap; } #desktop-study-room .study-room-guide p { grid-column:1 / -1; margin:0; padding:8px 12px; border-top:1px solid #2c4640; background:#10201c; color:#8eb2a6; font-size:11px; } #desktop-study-room .classroom-location { margin:0 0 14px; padding:0 3px; font-size:11px; } @media (max-width:780px) { #desktop-study-room .classroom-room-switch { gap:6px; } #desktop-study-room .classroom-room-switch button { padding:0 11px; font-size:11px; } #desktop-study-room .study-room-guide > div { min-height:50px; padding:9px 8px; } #desktop-study-room .study-room-guide p { font-size:10px; } } #desktop-study-room .study-buddy-panel { margin:0 0 18px; overflow:hidden; border:1px solid #2c4741; border-radius:16px; background:linear-gradient(112deg,#132521,#10201d); box-shadow:0 12px 24px rgba(3,16,13,.18); } #desktop-study-room .study-buddy-panel > header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 20px 13px; border-bottom:1px solid #29423c; } #desktop-study-room .study-buddy-panel header span { display:block; margin-bottom:4px; color:#65cdbb; font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.14em; } #desktop-study-room .study-buddy-panel h2 { margin:0; color:#e3f6ef; font-size:16px; } #desktop-study-room .study-buddy-panel header button,#desktop-study-room .study-buddy-panel footer button { min-height:30px; padding:0 11px; border:1px solid #4c9c8c; border-radius:8px; background:#1b4c42; color:#d7f5ec; font-size:11px; cursor:pointer; } #desktop-study-room .study-buddy-panel header button:hover,#desktop-study-room .study-buddy-panel footer button:hover { background:#256454; } #desktop-study-room .study-buddy-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; min-height:76px; padding:13px 20px; } #desktop-study-room .study-buddy-list > p { grid-column:1 / -1; margin:auto 0; color:#86a79d; font-size:12px; } #desktop-study-room .study-buddy-list article { display:grid; grid-template-columns:30px minmax(0,1fr) auto auto; align-items:center; gap:8px; padding:10px; border:1px solid #29463e; border-radius:10px; background:rgba(255,255,255,.035); } #desktop-study-room .study-buddy-list article > i { display:grid; width:30px; height:30px; place-items:center; border-radius:50%; background:#d7ac7f; color:#253d35; font:800 13px/1 system-ui,sans-serif; font-style:normal; } #desktop-study-room .study-buddy-list article div { min-width:0; } #desktop-study-room .study-buddy-list article strong,#desktop-study-room .study-buddy-list article span { overflow:hidden; display:block; text-overflow:ellipsis; white-space:nowrap; } #desktop-study-room .study-buddy-list article strong { color:#dff1e9; font-size:12px; } #desktop-study-room .study-buddy-list article span { margin-top:3px; color:#89a99f; font-size:10px; } #desktop-study-room .study-buddy-list article button { min-height:25px; padding:0 7px; border:1px solid #3d7165; border-radius:6px; background:transparent; color:#a8dbcf; font-size:10px; cursor:pointer; } #desktop-study-room .study-buddy-list article button:hover { background:#23463d; } #desktop-study-room .study-buddy-panel > footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 20px; border-top:1px solid #29423c; background:rgba(4,17,13,.2); } #desktop-study-room .study-buddy-panel footer span { color:#85a79c; font-size:11px; } @media (max-width:780px) { #desktop-study-room .study-buddy-panel > header,#desktop-study-room .study-buddy-panel > footer { padding:13px 14px; } #desktop-study-room .study-buddy-list { grid-template-columns:1fr; padding:11px 14px; } #desktop-study-room .study-buddy-list article { grid-template-columns:30px minmax(0,1fr) auto auto; } #desktop-study-room .study-buddy-panel footer span { font-size:10px; } } #desktop-study-room .study-room-hub { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; margin:0 0 14px; padding:24px 26px; overflow:hidden; border:1px solid #37665b; border-radius:20px; background:radial-gradient(circle at 87% 10%,rgba(125,226,199,.2),transparent 28%),linear-gradient(120deg,#18352e,#10211e 62%); box-shadow:0 14px 28px rgba(2,15,12,.2); } #desktop-study-room .study-room-hub-copy { position:relative; } #desktop-study-room .study-room-hub-copy::after { position:absolute; top:-61px; right:18px; width:126px; height:126px; border:1px solid rgba(173,239,218,.16); border-radius:50%; box-shadow:0 0 0 22px rgba(173,239,218,.05),0 0 0 44px rgba(173,239,218,.035); content:''; } #desktop-study-room .study-room-hub-copy > * { position:relative; z-index:1; } #desktop-study-room .study-room-hub-copy span { display:block; margin-bottom:8px; color:#79d7c4; font:800 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.16em; } #desktop-study-room .study-room-hub h2 { max-width:520px; margin:0; color:#effcf6; font-size:26px; letter-spacing:-.03em; } #desktop-study-room .study-room-hub p { margin:9px 0 0; color:#9bbcb1; font-size:13px; } #desktop-study-room .study-room-hub-status { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,minmax(118px,1fr)); gap:10px; min-width:294px; } #desktop-study-room .study-room-hub-status > div { padding:11px 12px; border:1px solid rgba(150,223,199,.2); border-radius:10px; background:rgba(3,18,14,.25); } #desktop-study-room .study-room-hub-status span { display:block; margin-bottom:5px; color:#82a79a; font-size:10px; } #desktop-study-room .study-room-hub-status strong { overflow:hidden; display:block; color:#e0f4eb; font-size:12px; text-overflow:ellipsis; white-space:nowrap; } #desktop-study-room .study-room-hub-status button { grid-column:1 / -1; min-height:38px; border:0; border-radius:10px; background:#6cdbc3; color:#14332b; font:800 12px/1 system-ui,sans-serif; cursor:pointer; box-shadow:0 7px 14px rgba(57,197,163,.17); } #desktop-study-room .study-room-hub-status button:hover { background:#96ebd9; transform:translateY(-1px); } #desktop-study-room .study-room-hub-status button:disabled { cursor:default; opacity:.72; transform:none; } #desktop-study-room .focus-summary { margin-bottom:14px; border-radius:14px; } #desktop-study-room .study-workspace-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0 0 16px; padding:0; border:0; border-radius:0; background:transparent; } #desktop-study-room .study-workspace-nav button { display:grid; grid-template-columns:30px 1fr; align-items:center; column-gap:10px; min-height:62px; padding:10px 14px; border:1px solid #2e4d44; border-radius:13px; background:#12241f; color:#89a89e; text-align:left; cursor:pointer; } #desktop-study-room .study-workspace-nav button i { grid-row:span 2; display:grid; width:30px; height:30px; place-items:center; border-radius:10px; background:#213d35; color:#9dd8c8; font-style:normal; } #desktop-study-room .study-workspace-nav button span { color:#c6ded5; font-size:12px; font-weight:800; } #desktop-study-room .study-workspace-nav button small { margin-top:2px; color:#74948a; font-size:10px; } #desktop-study-room .study-workspace-nav button.active,#desktop-study-room .study-workspace-nav button:hover { border-color:#417d6d; background:linear-gradient(130deg,#1a3d34,#19352e); box-shadow:inset 0 0 0 1px rgba(118,219,193,.08),0 5px 13px rgba(3,15,11,.14); } #desktop-study-room .study-workspace-nav button.active i { background:#5ac8b0; color:#14352d; } #desktop-study-room .focus-main-grid,#desktop-study-room .focus-history { border-radius:16px; } #desktop-study-room .study-detail-head { display:flex; align-items:center; gap:14px; margin:0 0 16px; padding:18px 20px; border:1px solid #314d45; border-radius:16px; background:linear-gradient(125deg,#152b26,#10201d); } #desktop-study-room .study-detail-head button { min-height:32px; padding:0 10px; border:1px solid #496e63; border-radius:8px; background:transparent; color:#b7ddd2; font-size:11px; cursor:pointer; } #desktop-study-room .study-detail-head button:hover { background:#23443b; } #desktop-study-room .study-detail-head span { display:block; margin-bottom:4px; color:#79cdbb; font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.14em; } #desktop-study-room .study-detail-head h2 { margin:0; color:#e6f6ef; font-size:18px; } #desktop-study-room .focus-main-grid[hidden],#desktop-study-room .focus-history[hidden],#desktop-study-room .classroom-panel[hidden],#desktop-study-room .study-buddy-panel[hidden],#desktop-study-room .classroom-ranking[hidden],#desktop-study-room .study-room-hub[hidden],#desktop-study-room .focus-summary[hidden],#desktop-study-room .study-workspace-nav[hidden],#desktop-study-room .study-detail-head[hidden] { display:none !important; } @media (max-width:780px) { #desktop-study-room .study-room-hub { grid-template-columns:1fr; gap:18px; padding:20px 18px; } #desktop-study-room .study-room-hub h2 { font-size:22px; } #desktop-study-room .study-room-hub-status { min-width:0; } #desktop-study-room .study-workspace-nav { gap:4px; padding:4px; } #desktop-study-room .study-workspace-nav button { grid-template-columns:1fr; gap:4px; min-height:58px; padding:7px 5px; text-align:center; } #desktop-study-room .study-workspace-nav button i { display:none; } #desktop-study-room .study-workspace-nav button small { font-size:9px; } } /* Final classroom scene lock: keep all 24 desks inside a bright, sunlit room. */ #desktop-study-room .classroom-layout.room-school, #desktop-study-room .classroom-layout.room-public { position:relative !important; min-height:620px !important; overflow:hidden !important; background:linear-gradient(180deg,#e2f5ee 0%,#c7e3d8 42%,#afd2c4 100%) !important; box-shadow:inset 0 0 0 10px #f3fbf7,inset 0 0 0 12px #6f968a,0 14px 28px rgba(21,67,56,.16) !important; } #desktop-study-room .classroom-layout.room-school .classroom-seats, #desktop-study-room .classroom-layout.room-public .classroom-seats { position:absolute !important; z-index:8 !important; inset:184px 48px 40px !important; display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; grid-template-rows:repeat(6,minmax(52px,1fr)) !important; gap:24px 34px !important; padding:0 !important; } #desktop-study-room .classroom-layout.room-school .classroom-desk, #desktop-study-room .classroom-layout.room-public .classroom-desk { width:100% !important; min-width:0 !important; min-height:0 !important; align-self:stretch !important; justify-self:stretch !important; padding:5px 7px 9px !important; border-color:#966640 !important; background:linear-gradient(180deg,#d3a26e,#a86e43) !important; box-shadow:inset 0 2px rgba(255,243,212,.54),inset 0 -5px rgba(79,42,22,.24),0 6px 0 #5a3822,0 10px 13px rgba(68,47,29,.18) !important; } #desktop-study-room .classroom-layout.room-school .classroom-windows, #desktop-study-room .classroom-layout.room-public .classroom-windows { position:absolute !important; z-index:5 !important; top:28px !important; display:grid !important; grid-template-columns:repeat(2,44px) !important; grid-template-rows:repeat(2,52px) !important; gap:4px !important; padding:7px !important; border:6px solid #f7f4de !important; background:#86b8c2 !important; box-shadow:0 4px 0 #76918b,0 10px 23px rgba(61,122,134,.2) !important; } #desktop-study-room .classroom-layout.room-school .classroom-windows-left, #desktop-study-room .classroom-layout.room-public .classroom-windows-left { left:34px !important; right:auto !important; } #desktop-study-room .classroom-layout.room-school .classroom-windows-right, #desktop-study-room .classroom-layout.room-public .classroom-windows-right { right:34px !important; left:auto !important; } #desktop-study-room .classroom-layout.room-school .classroom-windows i, #desktop-study-room .classroom-layout.room-public .classroom-windows i { width:44px !important; height:52px !important; background:linear-gradient(145deg,#e3fbff,#9dddea 64%,#7bc1cf) !important; box-shadow:inset 0 16px rgba(255,255,255,.42) !important; } #desktop-study-room .classroom-layout.room-school .classroom-sunlight, #desktop-study-room .classroom-layout.room-public .classroom-sunlight { position:absolute !important; z-index:2 !important; top:122px !important; left:8% !important; width:80% !important; height:62% !important; display:block !important; pointer-events:none !important; opacity:.72 !important; background:linear-gradient(112deg,rgba(255,252,204,.58),rgba(255,248,183,.18) 37%,transparent 59%),linear-gradient(68deg,rgba(255,253,214,.4),transparent 48%) !important; clip-path:polygon(2% 0,29% 0,100% 100%,69% 100%) !important; mix-blend-mode:screen !important; } #desktop-study-room .classroom-layout.room-school .classroom-podium, #desktop-study-room .classroom-layout.room-public .classroom-podium { top:132px !important; z-index:11 !important; } #desktop-study-room .classroom-layout.room-school .classroom-campus-board { top:18px !important; z-index:12 !important; } #desktop-study-room .classroom-layout.room-school .classroom-plant-one, #desktop-study-room .classroom-layout.room-public .classroom-plant-one { right:42px !important; bottom:44px !important; z-index:12 !important; transform:scale(1.1) !important; filter:drop-shadow(0 6px 5px rgba(26,70,46,.2)); } #desktop-study-room .classroom-layout.room-school .classroom-plant-two, #desktop-study-room .classroom-layout.room-public .classroom-plant-two { left:42px !important; bottom:40px !important; z-index:12 !important; transform:scale(1.02) !important; filter:drop-shadow(0 6px 5px rgba(26,70,46,.2)); } #desktop-study-room .classroom-layout.room-school .classroom-seat.is-occupied::before, #desktop-study-room .classroom-layout.room-public .classroom-seat.is-occupied::before { content:'' !important; position:absolute !important; z-index:4 !important; top:4px !important; left:50% !important; width:26px !important; height:16px !important; border:1px solid rgba(81,50,30,.48) !important; border-radius:2px !important; background:linear-gradient(90deg,#f5d79b 0 48%,#df7868 49% 100%) !important; box-shadow:11px 5px 0 -5px #79beca !important; transform:translateX(-50%) rotate(-5deg) !important; } #desktop-study-room .classroom-layout.room-school .classroom-seat.is-occupied[data-study-prop="1"]::before, #desktop-study-room .classroom-layout.room-public .classroom-seat.is-occupied[data-study-prop="1"]::before { width:10px !important; height:13px !important; border-radius:2px 2px 5px 5px !important; background:#70bdcc !important; box-shadow:14px 6px 0 -5px #f5d79b !important; } #desktop-study-room .classroom-layout.room-school .classroom-seat.is-occupied[data-study-prop="2"]::before, #desktop-study-room .classroom-layout.room-public .classroom-seat.is-occupied[data-study-prop="2"]::before { width:30px !important; height:12px !important; background:linear-gradient(90deg,#e5a86d 0 48%,#f5e5ad 49% 100%) !important; box-shadow:none !important; } @media (max-width:900px) { #desktop-study-room .classroom-layout.room-school,#desktop-study-room .classroom-layout.room-public { min-height:760px !important; } #desktop-study-room .classroom-layout.room-school .classroom-seats,#desktop-study-room .classroom-layout.room-public .classroom-seats { inset:178px 22px 30px !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; grid-template-rows:repeat(8,minmax(48px,1fr)) !important; gap:20px 18px !important; } #desktop-study-room .classroom-layout.room-school .classroom-windows-left,#desktop-study-room .classroom-layout.room-public .classroom-windows-left { left:10px !important; transform:scale(.78) !important; transform-origin:top left !important; } #desktop-study-room .classroom-layout.room-school .classroom-windows-right,#desktop-study-room .classroom-layout.room-public .classroom-windows-right { right:10px !important; transform:scale(.78) !important; transform-origin:top right !important; } } /* Final floor-plan guard: three interior desk columns at every desktop width. */ #desktop-study-room .classroom-layout.room-school .classroom-seats, #desktop-study-room .classroom-layout.room-public .classroom-seats { inset:190px 96px 54px !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; grid-template-rows:repeat(8,minmax(48px,1fr)) !important; gap:17px 30px !important; } #desktop-study-room .classroom-layout.room-school .classroom-windows-left, #desktop-study-room .classroom-layout.room-public .classroom-windows-left { left:34px !important; right:auto !important; } #desktop-study-room .classroom-layout.room-school .classroom-windows-right, #desktop-study-room .classroom-layout.room-public .classroom-windows-right { right:34px !important; left:auto !important; } @media (max-width:780px) { #desktop-study-room .classroom-layout.room-school .classroom-seats, #desktop-study-room .classroom-layout.room-public .classroom-seats { inset:178px 25px 42px !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; grid-template-rows:repeat(8,minmax(46px,1fr)) !important; gap:12px 14px !important; } } /* Classroom plan — the campus and public rooms are viewed from above, not as a stage set. */ #desktop-study-room .classroom-layout.room-school, #desktop-study-room .classroom-layout.room-public { min-height:760px !important; overflow:hidden !important; isolation:isolate; background: repeating-linear-gradient(90deg,rgba(255,218,147,.025) 0 2px,transparent 2px 38px), repeating-linear-gradient(0deg,rgba(40,20,8,.09) 0 1px,transparent 1px 42px), linear-gradient(135deg,#6e4228 0%,#9a6840 46%,#795033 100%) !important; box-shadow:inset 0 0 0 13px #382419,inset 0 0 0 17px #bc8956,inset 0 0 0 20px #4d301f,0 16px 30px rgba(7,17,14,.25) !important; } #desktop-study-room .classroom-layout.room-school::after, #desktop-study-room .classroom-layout.room-public::after { position:absolute !important; z-index:12; right:34px !important; bottom:0 !important; left:auto !important; width:108px !important; height:16px !important; border:0 !important; border-top:4px solid #deb477 !important; border-right:4px solid #593824 !important; border-left:4px solid #593824 !important; border-radius:0 !important; background:#2d1c14 !important; box-shadow:none !important; color:transparent !important; content:'' !important; } #desktop-study-room .classroom-layout.room-school .classroom-seats, #desktop-study-room .classroom-layout.room-public .classroom-seats { z-index:8 !important; inset:190px 96px 54px !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; grid-template-rows:repeat(8,minmax(48px,1fr)) !important; gap:17px 30px !important; } #desktop-study-room .classroom-layout.room-school .classroom-desk, #desktop-study-room .classroom-layout.room-public .classroom-desk { position:relative !important; width:100% !important; min-height:0 !important; padding:4px 6px 8px !important; border:2px solid #56331e !important; border-top-color:#e4b575 !important; border-radius:4px !important; background:linear-gradient(180deg,#cb8a4d 0 18%,#9b5c31 19% 82%,#57311f 83%) !important; box-shadow:inset 0 2px 0 rgba(255,226,164,.5),0 4px 0 #3b2217,0 7px 10px rgba(29,15,8,.28) !important; } #desktop-study-room .classroom-layout.room-school .classroom-seat, #desktop-study-room .classroom-layout.room-public .classroom-seat { transform:scale(.82) !important; } #desktop-study-room .classroom-layout.room-school .classroom-windows, #desktop-study-room .classroom-layout.room-public .classroom-windows { z-index:4 !important; top:20px !important; display:flex !important; gap:8px !important; width:176px !important; height:10px !important; padding:0 !important; border:0 !important; border-top:3px solid #e9c789 !important; border-bottom:3px solid #4c3324 !important; border-radius:0 !important; background:rgba(255,218,127,.45) !important; box-shadow:0 4px 10px rgba(255,201,104,.24) !important; } #desktop-study-room .classroom-layout.room-school .classroom-windows-left, #desktop-study-room .classroom-layout.room-public .classroom-windows-left { left:34px !important; right:auto !important; } #desktop-study-room .classroom-layout.room-school .classroom-windows-right, #desktop-study-room .classroom-layout.room-public .classroom-windows-right { right:34px !important; left:auto !important; } #desktop-study-room .classroom-layout.room-school .classroom-windows i, #desktop-study-room .classroom-layout.room-public .classroom-windows i { display:block !important; flex:1 !important; width:auto !important; height:7px !important; background:rgba(255,245,179,.82) !important; box-shadow:none !important; } #desktop-study-room .classroom-layout.room-school .classroom-sunlight, #desktop-study-room .classroom-layout.room-public .classroom-sunlight { z-index:3 !important; top:43px !important; left:14% !important; width:72% !important; height:64% !important; opacity:.48 !important; background:linear-gradient(118deg,rgba(255,224,137,.48),rgba(255,211,112,.14) 38%,transparent 67%) !important; clip-path:polygon(0 0,24% 0,100% 100%,70% 100%) !important; mix-blend-mode:screen !important; } #desktop-study-room .classroom-layout.room-school .classroom-campus-board { z-index:14 !important; top:48px !important; width:340px !important; min-height:70px !important; border:6px solid #70462b !important; background:#1f4032 !important; box-shadow:0 4px 0 #372115,0 9px 15px rgba(32,18,10,.3) !important; } #desktop-study-room .classroom-layout.room-school .classroom-podium, #desktop-study-room .classroom-layout.room-public .classroom-podium { z-index:13 !important; top:136px !important; left:50% !important; right:auto !important; width:174px !important; min-height:31px !important; transform:translateX(-50%) !important; } #desktop-study-room .classroom-layout.room-school .classroom-ac, #desktop-study-room .classroom-layout.room-public .classroom-ac, #desktop-study-room .classroom-layout.room-school .classroom-plant, #desktop-study-room .classroom-layout.room-public .classroom-plant, #desktop-study-room .classroom-layout.room-school .classroom-legend, #desktop-study-room .classroom-layout.room-public .classroom-legend { display:none !important; } #desktop-study-room .classroom-layout.room-school .classroom-seats::before, #desktop-study-room .classroom-layout.room-school .classroom-seats::after, #desktop-study-room .classroom-layout.room-public .classroom-seats::before, #desktop-study-room .classroom-layout.room-public .classroom-seats::after { display:none !important; } @media (max-width:780px) { #desktop-study-room .classroom-layout.room-school, #desktop-study-room .classroom-layout.room-public { min-height:790px !important; } #desktop-study-room .classroom-layout.room-school .classroom-seats, #desktop-study-room .classroom-layout.room-public .classroom-seats { inset:178px 25px 42px !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; grid-template-rows:repeat(8,minmax(46px,1fr)) !important; gap:12px 14px !important; } #desktop-study-room .classroom-layout.room-school .classroom-windows, #desktop-study-room .classroom-layout.room-public .classroom-windows { width:104px !important; } #desktop-study-room .classroom-layout.room-school .classroom-windows-left, #desktop-study-room .classroom-layout.room-public .classroom-windows-left { left:22px !important; } #desktop-study-room .classroom-layout.room-school .classroom-windows-right, #desktop-study-room .classroom-layout.room-public .classroom-windows-right { right:22px !important; } #desktop-study-room .classroom-layout.room-school .classroom-campus-board { top:44px !important; width:210px !important; min-height:58px !important; padding:9px 12px !important; } #desktop-study-room .classroom-layout.room-school .classroom-campus-board strong { font-size:9px !important; } #desktop-study-room .classroom-layout.room-school .classroom-campus-board span { overflow:hidden !important; font-size:8px !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #desktop-study-room .classroom-layout.room-school .classroom-podium, #desktop-study-room .classroom-layout.room-public .classroom-podium { top:124px !important; width:144px !important; font-size:8px !important; } } #desktop-study-room .classroom-layout.room-external .classroom-podium,#desktop-study-room .classroom-layout.room-external .classroom-legend,#desktop-study-room .classroom-layout.room-external .classroom-plant,#desktop-study-room .classroom-layout.room-external .classroom-windows,#desktop-study-room .classroom-layout.room-external .classroom-ac { display:none !important; } @media (max-width:780px) { #desktop-study-room .classroom-layout.room-external { min-height:760px !important; } #desktop-study-room .classroom-layout.room-external .classroom-seats { inset:16px !important; grid-template-columns:1fr !important; grid-template-rows:minmax(0,1fr) minmax(0,1fr) !important; } #desktop-study-room .classroom-layout.room-external .urban-quiet { border-right:0 !important; border-bottom:8px solid #c79662 !important; } #desktop-study-room .classroom-layout.room-external .urban-room { padding:16px !important; } #desktop-study-room .classroom-layout.room-external .urban-seat-grid { gap:10px 12px !important; padding:12px 4px 2px !important; } } /* EOF cascade guard: three-column floor plan; no desk may spill beyond the room. */ #desktop-study-room .classroom-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px 22px; align-items:start; } #desktop-study-room .classroom-location-controls { position:static; grid-column:1 / -1; grid-row:2; display:flex; flex-wrap:wrap; justify-content:flex-start; width:100%; margin-top:0; } #desktop-study-room .classroom-stats { min-width:132px; } #desktop-study-room .classroom-stats [data-leave-seat] { display:block; width:100%; min-height:27px; margin-top:8px; padding:0 8px; border:1px solid #4d6a64; border-radius:4px; background:#172522; color:#a6d9cf; font-size:10px; } #desktop-study-room .classroom-stats [data-leave-seat]:hover { border-color:#75d7c7; background:#1d3430; color:#e2faf5; } #desktop-study-room .classroom-stats [data-leave-seat][hidden] { display:none; } #desktop-study-room .classroom-layout.room-school .classroom-seats, #desktop-study-room .classroom-layout.room-public .classroom-seats { inset:176px 96px 54px !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; grid-template-rows:repeat(8,minmax(48px,1fr)) !important; gap:17px 30px !important; } #desktop-study-room .classroom-layout.room-school .classroom-desk, #desktop-study-room .classroom-layout.room-public .classroom-desk { width:100% !important; min-height:0 !important; } #desktop-study-room .classroom-layout.room-school .classroom-windows-left, #desktop-study-room .classroom-layout.room-public .classroom-windows-left { left:34px !important; right:auto !important; } #desktop-study-room .classroom-layout.room-school .classroom-windows-right, #desktop-study-room .classroom-layout.room-public .classroom-windows-right { right:34px !important; left:auto !important; } #desktop-study-room .classroom-layout.room-school .classroom-podium, #desktop-study-room .classroom-layout.room-public .classroom-podium { top:122px !important; } /* School desks use a restrained walnut finish that reads clearly on the dark floor. */ #desktop-study-room .classroom-layout.room-school .classroom-desk, #desktop-study-room .classroom-layout.room-public .classroom-desk { border-color:#8e5c38 !important; background:linear-gradient(145deg,#885633,#62391f) !important; box-shadow:inset 0 2px 0 rgba(255,218,169,.2),inset 0 -4px 0 rgba(39,19,10,.38),0 5px 0 #352015,0 8px 8px rgba(0,0,0,.28) !important; } @media (max-width:780px) { #desktop-study-room .classroom-head { grid-template-columns:1fr; gap:12px; } #desktop-study-room .classroom-location-controls { grid-column:1; grid-row:auto; } #desktop-study-room .classroom-stats { min-width:0; } #desktop-study-room .classroom-layout.room-school .classroom-seats, #desktop-study-room .classroom-layout.room-public .classroom-seats { inset:164px 25px 42px !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; grid-template-rows:repeat(8,minmax(46px,1fr)) !important; gap:12px 14px !important; } #desktop-study-room .classroom-layout.room-school .classroom-podium, #desktop-study-room .classroom-layout.room-public .classroom-podium { top:111px !important; } } /* Student access stays fully available while the room experience evolves. */ #desktop-study-room .study-room-improving-note { margin:0; padding:10px 14px; display:flex; align-items:center; gap:8px; border-bottom:1px solid rgba(83,180,159,.22); background:rgba(49,130,113,.12); color:#9fcabf; font-size:11px; line-height:1.45; } #desktop-study-room .study-room-improving-note i { width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:#64d7c3; box-shadow:0 0 0 4px rgba(100,215,195,.1); } body.desktop-light #desktop-study-room .study-room-improving-note { border-color:rgba(53,214,197,.26); background:rgba(53,214,197,.08); color:#397b73; } /* Final layout authority: keep the board beside the teaching position. */ #desktop-study-room .classroom-layout.room-school .classroom-campus-board { top:24px !important; right:24px !important; left:auto !important; width:min(250px,34%) !important; min-height:68px !important; transform:none !important; } #desktop-study-room .classroom-layout.room-school .classroom-podium, #desktop-study-room .classroom-layout.room-public .classroom-podium { top:122px !important; left:50% !important; right:auto !important; width:min(174px,28%) !important; min-height:42px !important; margin:0 !important; transform:translateX(-50%) !important; } @media (max-width:780px) { #desktop-study-room .classroom-layout.room-school .classroom-campus-board { top:18px !important; right:14px !important; width:min(190px,43%) !important; } #desktop-study-room .classroom-layout.room-school .classroom-podium, #desktop-study-room .classroom-layout.room-public .classroom-podium { top:111px !important; width:min(160px,42%) !important; } } /* Match the learning-dashboard palette: neutral surfaces, restrained teal actions. */ body.desktop-light #desktop-study-room { background:#faf9fd; color:#211f28; } body.desktop-light #desktop-study-room .focus-head { border-bottom-color:#ebe8f2; } body.desktop-light #desktop-study-room .focus-head h1, body.desktop-light #desktop-study-room .focus-section-head h2, body.desktop-light #desktop-study-room .classroom-head h2, body.desktop-light #desktop-study-room .classroom-ranking h2 { color:#211f28; } body.desktop-light #desktop-study-room .focus-head p, body.desktop-light #desktop-study-room .focus-eyebrow, body.desktop-light #desktop-study-room .focus-task-label, body.desktop-light #desktop-study-room .classroom-note { color:#706b7b; } body.desktop-light #desktop-study-room .focus-summary, body.desktop-light #desktop-study-room .focus-main-grid, body.desktop-light #desktop-study-room .classroom-panel, body.desktop-light #desktop-study-room .classroom-ranking, body.desktop-light #desktop-study-room .focus-history { border-color:#ebe8f2; background:#fff; box-shadow:none; } body.desktop-light #desktop-study-room .focus-main-grid .focus-timer-panel { background:transparent; } body.desktop-light #desktop-study-room .focus-main-grid .focus-insights { border-left-color:#ebe8f2; } body.desktop-light #desktop-study-room .focus-summary > div, body.desktop-light #desktop-study-room .focus-log article { border-color:#f0eef4; } body.desktop-light #desktop-study-room .focus-summary strong, body.desktop-light #desktop-study-room .focus-week-total, body.desktop-light #desktop-study-room .focus-category-list strong { color:#169e91; } body.desktop-light #desktop-study-room .focus-task, body.desktop-light #desktop-study-room .focus-category, body.desktop-light #desktop-study-room .focus-presets button, body.desktop-light #desktop-study-room .focus-reset { border-color:#ebe8f2; background:#f8f6fc; color:#4d4858; } body.desktop-light #desktop-study-room .focus-task:focus, body.desktop-light #desktop-study-room .focus-category:focus { border-color:#35d6c5; box-shadow:0 0 0 2px rgba(53,214,197,.16); } body.desktop-light #desktop-study-room .focus-primary { background:#35d6c5; color:#071b19; box-shadow:none; } body.desktop-light #desktop-study-room .focus-primary:hover { background:#136f66; } body.desktop-light #desktop-study-room .classroom-room-switch button { border-color:#ebe8f2; background:#f8f6fc; color:#706b7b; } body.desktop-light #desktop-study-room .classroom-room-switch button.active { border-color:#35d6c5; background:rgba(53,214,197,.10); color:#169e91; box-shadow:none; } body.desktop-light #desktop-study-room .classroom-stats { border-left-color:#ebe8f2; } body.desktop-light #desktop-study-room .classroom-ranking-head > b { border-color:rgba(53,214,197,.5); color:#169e91; } /* Reserve a front aisle: the podium cannot cover the first desk row. */ #desktop-study-room .classroom-layout.room-school .classroom-podium, #desktop-study-room .classroom-layout.room-public .classroom-podium { top:80px !important; z-index:7 !important; width:min(164px,26%) !important; } #desktop-study-room .classroom-layout.room-school .classroom-seats, #desktop-study-room .classroom-layout.room-public .classroom-seats { inset:170px 96px 54px !important; } @media (max-width:780px) { #desktop-study-room .classroom-layout.room-school .classroom-podium, #desktop-study-room .classroom-layout.room-public .classroom-podium { top:78px !important; width:142px !important; } #desktop-study-room .classroom-layout.room-school .classroom-seats, #desktop-study-room .classroom-layout.room-public .classroom-seats { inset:158px 25px 42px !important; } body.desktop-light #desktop-study-room .focus-main-grid .focus-insights { border-top-color:#ebe8f2; } } /* Dark mode follows the Today dashboard: graphite surfaces, teal only for intent. */ body.desktop-dark #desktop-study-room { background:#0d0d10; color:#ecebf0; } body.desktop-dark #desktop-study-room .focus-head { border-bottom-color:#202026; } body.desktop-dark #desktop-study-room .focus-summary, body.desktop-dark #desktop-study-room .focus-main-grid, body.desktop-dark #desktop-study-room .classroom-panel, body.desktop-dark #desktop-study-room .classroom-ranking, body.desktop-dark #desktop-study-room .focus-history { border-color:#2b2b33; background:#15151a; box-shadow:none; } body.desktop-dark #desktop-study-room .focus-main-grid { background:#15151a; } body.desktop-dark #desktop-study-room .focus-main-grid .focus-timer-panel { background:transparent; } body.desktop-dark #desktop-study-room .focus-main-grid .focus-insights { border-left-color:#2b2b33; background:#111115; } body.desktop-dark #desktop-study-room .focus-summary > div, body.desktop-dark #desktop-study-room .focus-log article { border-color:#25252d; } body.desktop-dark #desktop-study-room .seat-study-context { border-color:#284943 !important; background:#161f20 !important; } body.desktop-dark #desktop-study-room .seat-study-context strong { color:#e5eeee !important; } body.desktop-dark #desktop-study-room .seat-study-context span { color:#8d8995 !important; } body.desktop-dark #desktop-study-room .focus-task, body.desktop-dark #desktop-study-room .focus-category, body.desktop-dark #desktop-study-room .focus-presets button, body.desktop-dark #desktop-study-room .focus-reset { border-color:#2b2b33; background:#1d1d23; color:#d7d4df; } body.desktop-dark #desktop-study-room .focus-presets button.active, body.desktop-dark #desktop-study-room .focus-task:focus, body.desktop-dark #desktop-study-room .focus-category:focus { border-color:#267a70; box-shadow:0 0 0 2px rgba(53,214,197,.1); } body.desktop-dark #desktop-study-room .focus-primary { background:#267a70; color:#fff; box-shadow:none; } body.desktop-dark #desktop-study-room .focus-primary:hover { background:#319b8d; } body.desktop-dark #desktop-study-room .classroom-room-switch button { border-color:#2b2b33; background:#1d1d23; color:#a8a4b0; } body.desktop-dark #desktop-study-room .classroom-room-switch button.active { border-color:#35d6c5; background:rgba(53,214,197,.10); color:#58dfd0; box-shadow:none; } body.desktop-dark #desktop-study-room .study-room-improving-note { border-color:#2b2b33; background:#1d1d23; color:#a8a4b0; } body.desktop-dark #desktop-study-room .study-wish-wall { border-color:#2b2b33 !important; background:#15151a !important; } body.desktop-dark #desktop-study-room .study-wish-wall h2 { color:#ecebf0 !important; } body.desktop-dark #desktop-study-room .study-wish-wall header button { background:#267a70 !important; } body.desktop-dark #desktop-study-room .focus-summary strong, body.desktop-dark #desktop-study-room .focus-week-total, body.desktop-dark #desktop-study-room .focus-category-list strong, body.desktop-dark #desktop-study-room .focus-eyebrow { color:#35d6c5; } body.desktop-dark #desktop-study-room .focus-primary { background:#35d6c5; color:#071b19; } body.desktop-dark #desktop-study-room .focus-primary:hover { background:#58dfd0; } body.desktop-dark #desktop-study-room .focus-presets button.active, body.desktop-dark #desktop-study-room .focus-task:focus, body.desktop-dark #desktop-study-room .focus-category:focus, body.desktop-dark #desktop-study-room .classroom-room-switch button.active { border-color:#35d6c5; } body.desktop-dark #desktop-study-room .classroom-room-switch button.active { background:rgba(53,214,197,.1); color:#35d6c5; } body.desktop-dark #desktop-study-room .study-room-improving-note i { background:#35d6c5; box-shadow:0 0 0 4px rgba(53,214,197,.14); } #desktop-study-room .study-plan-panel { display:none !important; } /* Revision plan: compact enough to support a focus block, never an office task board. */ #desktop-study-room .study-plan-panel { margin:18px 0 0; padding:20px; border:1px solid #ebe8f2; border-radius:8px; background:#fff; } #desktop-study-room .study-plan-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; } #desktop-study-room .study-plan-head h2 { margin:5px 0 4px; color:#211f28; font-size:19px; } #desktop-study-room .study-plan-head p { margin:0; color:#706b7b; font-size:12px; } #desktop-study-room .study-plan-head button { min-height:32px; padding:0 11px; border:1px solid #35d6c5; border-radius:4px; background:transparent; color:#169e91; font-size:11px; } #desktop-study-room .study-plan-form { display:grid; grid-template-columns:2fr 1fr 1fr 92px 132px auto; gap:8px; margin-top:16px; padding-top:15px; border-top:1px solid #f0eef4; } #desktop-study-room .study-plan-form label { display:grid; gap:5px; color:#777184; font-size:10px; } #desktop-study-room .study-plan-form input,#desktop-study-room .study-plan-form select { width:100%; min-height:34px; border:1px solid #ebe8f2; border-radius:4px; outline:0; background:#f8f6fc; color:#211f28; font:inherit; font-size:11px; } #desktop-study-room .study-plan-form button { align-self:end; min-height:34px; padding:0 12px; border:0; border-radius:4px; background:#35d6c5; color:#071b19; font-size:11px; } #desktop-study-room .study-plan-summary { margin:15px 0 8px; color:#706b7b; font-size:11px; } #desktop-study-room .study-plan-list { display:grid; gap:1px; border-top:1px solid #f0eef4; } #desktop-study-room .study-plan-list article { display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:50px; border-bottom:1px solid #f0eef4; } #desktop-study-room .plan-check { width:18px; height:18px; padding:0; border:1px solid rgba(53,214,197,.6); border-radius:50%; background:#fff; color:#169e91; font-size:12px; } #desktop-study-room .study-plan-list strong,.study-plan-list span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #desktop-study-room .study-plan-list strong { color:#312d3b; font-size:12px; } #desktop-study-room .study-plan-list span { margin-top:3px; color:#8b8497; font-size:10px; } #desktop-study-room .study-plan-list .is-done strong,#desktop-study-room .study-plan-list .is-done span { color:#a8a3b0; text-decoration:line-through; } #desktop-study-room .plan-start { min-height:28px; padding:0 9px; border:1px solid rgba(53,214,197,.45); border-radius:4px; background:rgba(53,214,197,.09); color:#169e91; font-size:10px; } #desktop-study-room .plan-start:disabled { opacity:.45; } #desktop-study-room .study-plan-empty { margin:16px 0 4px; color:#8b8497; font-size:11px; } body.desktop-dark #desktop-study-room .study-plan-panel { border-color:#2b2b33; background:#15151a; } body.desktop-dark #desktop-study-room .study-plan-head h2,body.desktop-dark #desktop-study-room .study-plan-list strong { color:#ecebf0; } body.desktop-dark #desktop-study-room .study-plan-head p,body.desktop-dark #desktop-study-room .study-plan-summary,body.desktop-dark #desktop-study-room .study-plan-list span { color:#8d8995; } body.desktop-dark #desktop-study-room .study-plan-form,body.desktop-dark #desktop-study-room .study-plan-list,body.desktop-dark #desktop-study-room .study-plan-list article { border-color:#25252d; } body.desktop-dark #desktop-study-room .study-plan-form input,body.desktop-dark #desktop-study-room .study-plan-form select { border-color:#2b2b33; background:#1d1d23; color:#ecebf0; } body.desktop-dark #desktop-study-room .plan-check { border-color:#4a4a55; background:#15151a; } body.desktop-dark #desktop-study-room .plan-start { border-color:#285e57; background:#182927; color:#58dfd0; } @media (max-width:900px) { #desktop-study-room .study-plan-form { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:780px) { #desktop-study-room .study-plan-panel { padding:16px; } #desktop-study-room .study-plan-head { display:block; } #desktop-study-room .study-plan-head button { margin-top:12px; } #desktop-study-room .study-plan-form { grid-template-columns:1fr; } }